描述:在前端vue(webpack脚手架模式)开发中,我们是否也可以使用"后端profile的思路"实现配置信息的分环境化,方便开发和现场部署切换配置?

(一)新建以下三个文件

  1. /utils/global.js;
  2. /static/config/config-development.json;
  3. /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实例加载之前加载出来,而且还会依据不同的环境自动切换。

Logo

前往低代码交流专区

更多推荐