如何实现vue项目读取配置文件,不重新打包
在项目开发时,经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致,部署测式环境打个包,上线生产时又要重新出包,这样测试又会担心最后这此打包会不会出问题,到生产环境还有问题,为了解决这个问题,特将这些配置信息剥离出来,不在进行重新打包,只需要修改一个文件,vue打包好的项目直接读取配置文件内容就可以了。具体方法如下:1、public下创建project.config.jsonpro...
·
在项目开发时,经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致,部署测式环境打个包,上线生产时又要重新出包,这样测试又会担心最后这此打包会不会出问题,到生产环境还有问题,为了解决这个问题,特将这些配置信息剥离出来,不在进行重新打包,只需要修改一个文件,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要快。
更多推荐
已为社区贡献3条内容
所有评论(0)