Vue2项目打包后部署到IIS时config.json配置无法加载问题

你当前使用require('/public/config.json')加载配置的写法，会导致webpack在编译打包阶段直接将开发环境的config.json内容硬编码到JS产物中，部署后应用不会发起任何请求读取外部的同名配置文件，因此修改外部文件路径、更新外部配置内容都不会生效。

1. 替换加载方式，改用运行时异步请求 #

删除原有require加载配置的代码，改为在Vue实例初始化前通过网络请求加载配置，确保每次启动应用都会读取最新的外部配置：

// router/index.ts 或 main.ts 中修改原有配置加载逻辑
fetch('/config.json')
  .then(response => response.json())
  .then(config => {
    // 配置加载完成后再挂载Vue实例，避免Okta初始化时拿不到配置
    Vue.prototype.$config = config
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
  })

2. 配置文件存放规范 #

• 开发环境：将config.json放在项目根目录的public文件夹下（与src目录平级），不需要额外配置即可正常加载
• 部署环境：将config.json直接放在IIS站点的根目录，与打包生成的index.html文件平级即可，不需要创建public、js/public这类子目录存放

3. 可选打包配置优化 #

如果你需要确保开发环境的配置不会被编译进打包产物，可检查vue.config.js的如下配置：

• 不要在configureWebpack/chainWebpack中添加任何处理public/config.json的loader规则
• 确认没有通过import/require在任何业务代码、配置代码中引入config.json，只要没有显式引入，webpack就不会将其打包进JS产物，只会将public目录下的文件原样拷贝到打包输出根目录

IIS额外配置注意事项 #

• 确认IIS站点已添加.json后缀的MIME类型，值为application/json，否则IIS会拒绝返回JSON配置文件
• 如果应用部署在IIS子站点（而非根站点），需要将请求路径改为./config.json，同时将vue.config.js中的publicPath配置为./

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