Vue.js如何在运行时加载config.json而非编译时打包引入

你当前使用的require('/public/config.json')属于编译时静态加载语法，webpack等前端构建工具在打包阶段会直接读取config.json的内容并硬编码到产物中，不会保留运行时加载文件的逻辑。

方案1：HTTP异步请求加载配置（稳定推荐） #

该方案不需要修改构建配置，适配所有前端构建工具，步骤如下：

• 确认config.json存放在项目public目录下，构建时该目录下的文件会被原样复制到dist根目录，不会被编译处理
• 修改入口文件（通常为main.js的加载逻辑，在Vue实例初始化前先加载配置，保证应用启动时配置已就绪：

import Vue from 'vue'
import App from './App.vue'
// 可以用原生fetch或者axios
fetch('/config.json')
  .then(response => response.json())
  .then(config => {
    Vue.prototype.$config = config
    // 配置加载完成后再初始化Vue实例
    new Vue({
      render: h => h(App)
    }).$mount('#app')
  })
  .catch(err => {
    console.error('配置文件加载失败，请检查路径配置:', err)
  })

• 不同环境部署时，直接替换dist目录下的config.json即可，无需重新构建代码

方案2：配置构建工具排除打包 #

如果需要保留类似同步加载的写法，可在构建配置中声明该文件为外部资源，不参与打包：
以vue-cli项目为例，修改vue.config.js：

module.exports = {
  configureWebpack: {
    externals: {
      // 声明该路径的资源不会被打包进产物，运行时从外部加载
      '/public/config.json': 'window.config'
    }
  }
}

• 若应用部署在域名子路径下，需将配置文件请求路径调整为对应子路径，例如/business/config.json
• 可提前为不同环境准备独立配置文件config.dev.json/config.qa.json/config.prod.json，部署时对应重命名为config.json放入dist目录即可

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