在项目开发时,经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致,部署测式环境打个包,上线生产时又要重新出包,这样测试又会担心最后这此打包会不会出问题,到生产环境还有问题,为了解决这个问题,特将这些配置信息剥离出来,不在进行重新打包,只需要修改一个文件,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要快。

Logo

前往低代码交流专区

更多推荐