需求：
接口域名是从外部 .json 文件里获取的。
思路：
在开始加载项目前 进行接口域名获取，然后重置 接口域名的配置项。
实现：
1、config/index.js 文件 进行基础配置
import axios from 'axios'
const config = {
requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址
baseUrl: {
dev: '/api/',
pro: 'http://xxx.com/' // 接口域名，会被动态覆盖
},
requestRemoteIp: () => { // 动态获取
return new Promise((resolve, reject) => {
axios.get(config.requestUrl).then(response =>
{
config.baseUrl.pro = response.data.data.path;
config.img.domain = config.baseUrl.pro;
resolve()
}, err => {
reject()
});
});
}
}
export default config
2、项目下main.js 文件 进行动态获取
import config from '@/config/index.js' // 读取接口域名
config.requestRemoteIp().finally(res => {
/* eslint-disable no-new */
new Vue({
el: '#app', router,
components: { App },
template: '<App/>'
})
});
3、请求数据
const instance = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
})