如何将URL路径从外部文件加载到前端HTML文件中？

以下是几种可行的方法，你可以根据项目环境选择合适的方式：

方法1：使用ES模块（推荐） #

这种方式避免全局变量污染，代码结构更清晰。

1. 创建一个独立的JavaScript文件（例如apiUrls.js），导出URL配置对象：

export const apiUrls = {
  exampleURL1: "http://serviceExample1/",
  exampleURL2: "http://serviceExample2.com/",
  exampleURL3: "http://serviceExample3.com/"
};

2. 在你的主脚本中导入这个配置：

// 确保主脚本运行在模块环境中
import { apiUrls } from './apiUrls.js';

// 调用服务时使用
xhttp.open("GET", apiUrls.exampleURL1 + [...]);

如果直接在HTML中引入主脚本，需要添加type="module"属性：

<script type="module" src="your-main-script.js"></script>

方法2：使用JSON配置文件 #

如果URL不需要逻辑处理，JSON文件是更简洁的选择，编辑起来也更方便。

1. 创建apiUrls.json文件：

{
  "exampleURL1": "http://serviceExample1/",
  "exampleURL2": "http://serviceExample2.com/",
  "exampleURL3": "http://serviceExample3.com/"
}

2. 在主脚本中通过fetch加载这个JSON文件：

async function loadApiUrls() {
  const response = await fetch('./apiUrls.json');
  return await response.json();
}

// 使用时先加载配置
loadApiUrls().then(urls => {
  xhttp.open("GET", urls.exampleURL1 + [...]);
});

注意：静态部署时需确保服务器允许访问JSON文件，且不存在跨域问题。

方法3：全局变量方式（兼容旧环境） #

如果需要支持不兼容ES模块的旧浏览器，可以将配置挂载到全局window对象：

1. 创建apiUrls.js文件：

window.apiUrls = {
  exampleURL1: "http://serviceExample1/",
  exampleURL2: "http://serviceExample2.com/",
  exampleURL3: "http://serviceExample3.com/"
};

2. 在HTML中先引入这个配置文件，再引入主脚本：

<script src="apiUrls.js"></script>
<script src="your-main-script.js"></script>

3. 在主脚本中直接使用全局变量：

xhttp.open("GET", window.apiUrls.exampleURL1 + [...]);

内容的提问来源于stack exchange，提问作者Aegard