vue将配置文件设为全局变量

一、使用场景

• 有时候，我们需要将配置文件当做全局变量使用，比如：前端vue项目打包后，需要部署到两个不同的服务器上，而两个服务器的配置不同。如果直接修改代码比较麻烦，这种情况可以建一个全局的配置文件，部署到不同的服务器上时，只需要修改打包后的配置文件就行了。

• 如果根目录下没有public文件夹，但是有static文件夹，可参考文章读取static中的配置文件

• 如果根目录下有public文件夹，请参考下面的方法

二、使用方法

• 第一步：在public目录下，新建一个文件config.json（和index.html文件同级），如下：
  
• 第二步：填写配置文件config.json，根据项目需要编写，案例如下：

{
  "xiaofei": {
    "appKey":"41cd51d689ee3981",
    "sign":"YjEwNmZhYzRmNDBjNzUwMGM3NmNiZDE",
  },
  "tongxing": {
    "appKey":"41cd51d689ee3981",
    "sign":"YjEwNmZhYzRmNDBjNzUwMG",
  }
}

• 第三步：在main.js文件中，使用Vue.prototype定义全局属性，并将config.json中的参数赋值给全局属性

//引入axios
import axios from "axios"

axios.get('./config.json').then(res => {
  //定义全局属性baseConfig(变量名，随意取)，res.data就是config.json中的对象
  Vue.prototype.baseConfig = JSON.parse(JSON.stringify(res.data))

  new Vue({
    render: (h) => h(App),
  }).$mount("#app");
})

• 第四步：可在任意页面使用配置中的内容，举例如下：

  let appkey = this.baseConfig.xiaofei.appKey

三、部署到服务器时

• vue项目通过npm run build打包后，生成的dist文件内容如下：
  
• 可以看到有一个config.json文件，当我们需要配置全局的参数时，只需要修改该文件即可。