vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm run test 打包测试版本,使用npm run build打包生产环境的版本,可是测试嫌麻烦,说让弄成配置文件形式的 ,直接改配置文件就可以改接口地址的那种。
想了一阵子没想到方法,同事过来看了看说,,把接口地址挂载window全局对象下面不就行了,在同事 的点拨下,瞬间知道该咋做了,,好吧,是我想的太复杂了
简单的做法:
1.在项目根目录下的static文件夹下新建一个config.js(因为static文件夹下的东西在执行打包的时候会复制到打包后的目录里),在里边写:
window.serverAPI={ url:"http://www.xxx.com", timeout:5000 }
2.在入口index.html 里 引入config.js
3.在项目中配置axios就可以这样:
let http = axios.create({ baseURL: window.serverAPI.url, timeout: window.serverAPI.timeout });
然后 测试 拿去用的话 就可以自己去改config.js里的url 来改接口地址啦
第二种方法(推荐)(20190530更新):
将接口配置成json 并将api.json文件放在static文件夹下:
{ "onlineServer": { "enabled": "true", "name": "onlineServer", "api": "http://www.xxx.com" }, "testServer": { "enabled": "false", "name": "testServer", "api": "http://xxx.xxx.xx.xx" } }
上方是我定义的格式 ,onlineServer是线上接口的配置,testServer是测试服务器的配置,程序里边 通过enabled属性来判断使用哪个配置.
在vue入口文件 (一般就是main.js),先去获取 api.json ,获取到后再去实例化Vue,代码如下:
const loadApiConfig = new Promise((resolve, reject) => { let o = require('../static/api.json'); if (o){ resolve(o); }else { reject("api获取失败") } }); loadApiConfig.then(res=>{ let apiConfig = {}; for (let p in res) { if (res.hasOwnProperty(p)) { //判断 enabled 是true 就使用这个配置 if (res[p].enabled === "true") { apiConfig = res[p]; } } } console.log(apiConfig); console.log("获取api成功"); //创建一个axios实例 配置刚刚获取的到api 地址等 参数 并挂载到Vue原型链上 在组件中就可以 用this.$http 去请求数据了 Vue.prototype.$http = axios.create({ baseURL: apiConfig.api, timeout: apiConfig.timeout, headers: { "Content-Type": "application/json" } }); // 实例化vue new Vue({ el: '#app', router, components: {App}, template: '<App/>' }); }).catch(e =>{ console.error(e) })
版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/540/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。
匿名
CrazyMing@匿名