使用配置文件实现vue多环境（dev、prod）切换

描述：在前端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实例加载之前加载出来，而且还会依据不同的环境自动切换。