1. 此功能的原因:
1. 当接口地址需要改动时,需要修改代码重新提交、重新打包;
2. 当项目不需要修改功能;只需要改变一下接口地址,其它项目可以直接部署使用时;
2. 思路:
配置一个json文件,可以通过修改此文件达到改变接口地址的目的;
此时便需要在页面入口处可以读到此文件;
3: 实施
3-1: 新建pathConfig.json文件
此文件由于是对外可以进行修改的,因此不能进行编译,可放在static文件夹下;
{
"currEnv": "", // 如果为空,则默认使用内部自定义的环境地址
"dev": {
"protocal": "https://", // 如果为空,则默认使用浏览器地址的协议
"baseUrl": "192.168.xx.xx:8080/test",
},
"test": {
"protocal": "",
"baseUrl": "192.168.xx.xx:8080/test",
},
"product": {
"protocal": "http://",
"baseUrl": "192.168.xx.xx:8080/test",
}
}
3-2: 在plugins文件夹下配置pathConfig.js获取pathConfig.json中的配置挂在到全局Vue.prototype上;
import Vue from 'vue';
import axios from 'axios';
const protocolTmp = window.location.protocol;
const { host } = window.location;
async function getServerConfig() {
return new Promise(async (resolve, reject) => {
await axios.get(`${protocolTmp}//${host}/上下文/pathConfig.json`).then((result) => {
const { currEnv } = result.data;
let config = {};
if (currEnv) {
Vue.prototype.currEnv = currEnv;
config = result.data[currEnv];
Object.keys(config).forEach((key) => {
Vue.prototype[key] = config[key];
});
}
resolve();
}).catch((error) => {
console.log(error);
reject();
});
});
}
getServerConfig();
3-3: 在nuxt.config.js中配置pathConfig.js
plugins: [
'@/plugins/pathConfig'
],
3-4: 在plugins/axios.js中使用
import Vue from 'vue';
import axios from 'axios';
import path from '~/config';
const timeout = 200000;
const protocal = Vue.prototype.protocal ? Vue.prototype.protocal : `${window.location.protocol}//`;
const baseUrl = Vue.prototype.currEnv ? `${protocal}${Vue.prototype.baseUrl}` : path.baseUrl;
export const indexAxios = axios.create({
baseURL: baseUrl,
timeout
});
至此,打包后,修改pathConfig.json中的地址后,刷新页面就可以使用新的接口地址了。
网友评论