Vue2实现一次编译按部署层级切换运行时配置的解决方案问询

多环境打包方案说明 #

Vue官方默认的标准化方案确实是基于.env配置文件的构建时注入模式：你可以为dev/qa/prod分别创建.env.[环境名]文件，所有VUE_APP_开头的变量会在构建时注入到代码中，不同环境执行对应模式的构建命令生成独立包，这套方案零定制成本，完全符合Vue生态的默认规范。

一次编译、运行时加载配置的实现方案 #

如果需要沿用.NET体系下一次构建、部署时替换配置的模式，以下两种都是Vue生态中常用的成熟方案，无需过度自定义：

同步加载静态配置方案（适配你需要router初始化前拿到配置的需求） #

1. 在项目public目录下新建config.json文件，存放Okta等所有运行时配置，这个目录的文件不会被编译打包，部署时直接替换该文件即可修改配置。
2. 在router/index.ts最开头用同步XMLHttpRequest加载配置，不要用fetch（fetch仅支持异步）：

// 同步加载运行时配置
function loadConfigSync() {
  const xhr = new XMLHttpRequest()
  // 第三个参数设为false代表同步请求
  xhr.open('GET', '/config.json', false)
  xhr.send()
  if (xhr.status === 200) {
    return JSON.parse(xhr.responseText)
  }
  throw new Error('运行时配置加载失败')
}

// 先拿到配置再初始化后续逻辑
const runtimeConfig = loadConfigSync()
// 这里可以直接用runtimeConfig的配置初始化Okta等逻辑

// 原router初始化逻辑不受影响
const router = new VueRouter({
  mode: 'history',
  routes,
})

export default router

全局挂载配置方案（更轻量化） #

1. 在public目录下新建config.js，直接把配置挂载到window全局对象：

// public/config.js 部署时直接替换该文件
window.RUNTIME_CONFIG = {
  oktaDomain: '你的域名',
  oktaClientId: '你的客户端ID',
  // 其他所有配置项
}

2. 在项目入口public/index.html的head标签最开头引入这个配置文件：

<head>
  <script src="/config.js"></script>
  <!-- 其他原有meta、script标签保持不变 -->
</head>

3. 所有代码（包括router/index.ts）中可以直接读取window.RUNTIME_CONFIG的配置值，完全同步，无需额外请求逻辑。

回调初始化router报错说明 #

你之前把router初始化放在fetch的then回调中报错，是因为router/index.ts默认是同步导出router实例的，异步回调中才初始化的话，其他模块引入router时会拿到undefined。如果要走异步加载方案需要调整入口main.ts的初始化逻辑，等配置加载完成再实例化Vue，上面的同步方案不需要修改现有代码结构，直接复用原有逻辑即可。

内容的提问来源于stack exchange，提问作者Eric Brown - Cal