如何读取config.js中的baseUrl参数，供多个HTML文件全局复用？

方案1：全局挂载配置（兼容性最优，适合所有浏览器场景） #

• 第一步：调整config.js代码，将配置挂载到全局window对象上，避免模块导入限制：

window.siteConfig = {
  baseUrl: "https://example.com/"
  // 后续其他全局配置也可以统一放在这里
}

• 第二步：在所有需要用到配置的HTML文件中，优先引入config.js，要放在所有业务脚本之前：

<script src="./config.js"></script>

• 第三步：修改原有链接写法，把固定的baseUrl部分剥离，用自定义属性存路径模板：

<ul style="display:grid">
  <li>
    <!-- 用data-href-template存去掉baseUrl的路径模板 -->
    <a data-href-template="/static/geonode/final/${crop}/data.zip" target="_blank">农业气候数据</a>
  </li>
</ul>

• 第四步：写一段通用的路径替换逻辑，封装到公共JS文件中，所有HTML都引入即可：

document.addEventListener('DOMContentLoaded', function() {
  const baseUrl = window.siteConfig.baseUrl;
  // 遍历所有带路径模板的链接
  document.querySelectorAll('a[data-href-template]').forEach(link => {
    const pathTemplate = link.dataset.hrefTemplate;
    // 按你的业务需求替换模板变量，示例中是替换${crop}
    const crop = '你实际的作物参数值';
    const finalHref = baseUrl + pathTemplate.replace('${crop}', crop);
    link.setAttribute('href', finalHref);
  });
  // 如果有img、script等其他资源需要用baseUrl，也可以参照这个逻辑扩展
})

方案2：ES模块导入（适合现代浏览器，无需全局变量污染） #

• 第一步：保留原config.js的ES模块导出写法：

export const baseUrl = "https://example.com/";

• 第二步：在HTML中引入业务脚本时添加type="module"属性，直接导入配置使用：

<script type="module">
  import { baseUrl } from './config.js';
  document.addEventListener('DOMContentLoaded', () => {
    // 路径替换逻辑和方案1完全一致
    document.querySelectorAll('a[data-href-template]').forEach(link => {
      const pathTemplate = link.dataset.hrefTemplate;
      const crop = '实际参数值';
      link.href = baseUrl + pathTemplate.replace('${crop}', crop);
    });
  });
</script>

两种方案都只需要修改config.js里的baseUrl即可全局生效，不需要逐个修改HTML里的链接。

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