Vue.js构建模式下如何在index.html中差异化加载外部脚本文件？

方案1：基于构建工具实现（最推荐，优雅且性能最优） #

你之前用NODE_ENV不生效的核心原因是：NODE_ENV 是构建/服务端环境的变量，默认不会注入到浏览器前端运行时，只要通过构建工具配置暴露变量，就能在构建阶段直接决定是否插入脚本，不需要前端运行时判断，性能更好也更准确。

• 如果你用Vite：可以直接用内置的环境变量判断，既可以在HTML模板里写条件判断，也可以在JS逻辑里处理
  示例（Vite HTML模板写法）：

  <% if (import.meta.env.PROD) { %>
    <script src="你的生产脚本地址.js"></script>
  <% } %>
  

• 如果你用Webpack：配置DefinePlugin暴露process.env.NODE_ENV后，同样可以在模板或JS里做构建时判断。

方案2：运行时判断优化（适合无构建工具的纯静态场景） #

如果你没有用构建工具，就是纯静态HTML部署，你现在的写法可以优化几个点：修正事件监听拼写错误、避免正则匹配的误判、不用等待window.load触发再加载脚本减少延迟，优化后代码如下：

<!DOCTYPE html>
<html>
<head>
...
<script>
  // 提前配置允许加载脚本的生产域名列表，方便维护
  const PROD_HOST_LIST = ['你的生产域名1', '你的生产域名2']
  // 无需等待页面完全加载，DOM解析到这里就可以判断加载，加快脚本执行时机
  if (PROD_HOST_LIST.includes(window.location.host)) {
    const script = document.createElement('script')
    script.src = '目标脚本地址.js'
    // 可选：如果脚本不需要依赖DOM解析完成，加async不阻塞页面渲染
    script.async = true
    document.head.appendChild(script)
  }
</script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

方案3：部署层注入（适合多环境部署用同一套代码的场景） #

如果你的多环境部署用的是同一套前端代码，不想把判断逻辑写在前端，可以在部署层处理：比如Nginx配置sub_filter规则、或者用部署平台的环境变量注入能力，生产环境部署时自动插入目标script标签，测试/开发环境不插入，前端完全不需要写判断逻辑。

内容的提问来源于stack exchange，提问作者YOUNG MIN CHO