在Windows Server的IIS中配置Vue.js v2.6.12环境变量无法读取的问题

你之前在IIS的web.config里通过appSettings配置VUE_APP_*变量的方法行不通，原因很简单：Vue的VUE_APP_*环境变量是构建阶段嵌入代码的，打包后就固定了。而IIS的appSettings是给服务器端应用（比如ASP.NET）用的，前端运行在浏览器里，根本访问不到这些服务器端配置。

要实现无需重新构建就能切换API地址，换个思路，用静态配置文件的方式：

步骤1：新增静态配置文件 #

在Vue项目的public目录下创建config.json文件（这个目录下的文件会直接复制到打包后的dist文件夹，不会被webpack编译），内容如下：

{
  "BASE_API": "https://example.com/api/v1",
  "BASE_YARDVIEW": "https://example.com"
}

步骤2：在Vue项目中加载配置 #

修改项目的main.js，先请求这个配置文件，再启动Vue实例，把配置挂载到全局方便使用：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 加载静态配置文件
fetch('/config.json')
  .then(response => response.json())
  .then(config => {
    // 挂载到Vue原型，所有组件都能通过this.$config访问
    Vue.prototype.$config = config
    
    // 启动应用
    new Vue({
      render: h => h(App)
    }).$mount('#app')
  })

步骤3：在组件中使用配置 #

在任意Vue组件里直接调用配置：

// 比如在请求API时使用
axios.get(`${this.$config.BASE_API}/user/list`)

步骤4：部署后修改配置 #

把打包好的dist目录部署到IIS后，想要切换API地址，直接找到dist文件夹里的config.json修改保存，刷新浏览器就能生效，完全不用重新构建项目。

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