如何实现vue项目读取配置文件，不重新打包

在项目开发时，经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致，部署测式环境打个包，上线生产时又要重新出包，这样测试又会担心最后这此打包会不会出问题，到生产环境还有问题，为了解决这个问题，特将这些配置信息剥离出来，不在进行重新打包，只需要修改一个文件，vue打包好的项目直接读取配置文件内容就可以了。具体方法如下：

1、public下创建project.config.json

project.config.json
{
    url:"http://www.demo.com"
}

2、入口文件中读取project.config.json，将配置信息保存于vue原型，方便调用。

async function getConfig(){

   return Vue.prototype.$axiosJson.get("./project.config.json").then(res=>{
      Vue.prototype.$config=res.data
   })

}

async function createApp(){

   new Vue({

      router,

      store,

      render:h=>h(App)

   }).$mount(document.body.appendChild(document.createElement("div")))

}

(async function(){

   await getConfig();

   await createApp();

})()

经过以上步骤就完成了配置文件的读取，之后便可以在文件中调用了。需要注意的是，不能用于store中，因为store载入比实例化vue要快。