(五)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

 

posted @ 2018-11-10 18:31  苏州城外的微笑  阅读(3066)  评论(0编辑  收藏  举报