（五）vue.js 外部配置文件（参考）

前文我们已经安装了axios，现在我们来配置外部文件

1.在vue项目中的static目录下新增文件config.json

{
    "apiUrl": "http://127.0.0.1:30010/support/"
}

方式一：在main.js中引入axios，并定义一个全局函数来获取配置文件

import axios from 'axios'

Vue.prototype.$http = axios
Vue.prototype.getConfig = function () {
  this.$http.get('./static/config.json').then(res => {
    Vue.prototype.apiUrl = res.data.apiUrl
  }).catch(err => {
    console.log(err)
  })
}

在app.vue里面调用getConfig()获取ApiUrl，使用时直接使用 this.ApiUrl+'/api/‘ 进行调用

//调用getConfig()获取ApiUrl
mounted() {
  this.getConfig();
}

输入npm run build进行打包，查看dist文件夹下的config.json文件，实现外部配置

方式二：在 main.js 中直接引入 config.json 配置文件，使用原型链挂载配置文件

import config from '../static/config.json'

Vue.prototype.apiUrl = config.apiUrl