使用配置文件实现vue多环境(dev、prod)切换
体验过后端的profile后,再也不怕开发和现场部署修改切换配置啦。一个命令就搞定。在前端vue(webpack脚手架模式)开发中,我们是否也可以使用同样的思路实现下配置信息的分环境化?只需以下几步即可。(一)新建以下三个文件/utils/global.js;/static/config/config-development.json;/static/config/config-pro...
·
描述:在前端vue(webpack脚手架模式)开发中,我们是否也可以使用"后端profile的思路"实现配置信息的分环境化,方便开发和现场部署切换配置?
(一)新建以下三个文件
- /utils/global.js;
- /static/config/config-development.json;
- /static/config/config-production.json;
(二)global中增加初始化方法
let global = {}
global.getEnv = function () {
let env = 'development'
if (process.env.NODE_ENV) {
env = process.env.NODE_ENV
}
return env
}
global.init = function () {
return new Promise((resolve,reject) => {
let env = this.getEnv();
axios.get(`static/config/config-${env}.json`).then(res => {
...
}).catch(err => {
reject(true)
console.log('获取配置异常')
})
})
}
(三)main.js中配置,先加载配置信息,再初始化vue实例
import Global from '/util/global'
Global.init().then(() => {
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
}).catch(err => {
console.log('获取配置文件失败')
})
∴ 这样就好啦,有些必要的配置就可以在vue实例加载之前加载出来,而且还会依据不同的环境自动切换。
更多推荐
已为社区贡献3条内容
所有评论(0)