vue项目接口域名动态获取
2024-10-11 01:15:26
需求：
接口域名是从外部 .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
})
最新文章
- Oracle中执行存储过程call和exec区别
- Ruby on Rails 接口无法调试的问题
- 招聘：web前端开发（中级、高级均可）
- Jenkins进阶系列之——10Publish Over SSH插件
- beta发布排序结果
- VS中两个常用辅助工具
- CXF之七 传输文件
- P151、面试题27：二叉搜索树与双向链表
- 使用正则表达式匹配JS函数代码
- Sum Problem-hdu-1001
- Finding the Longest Palindromic Substring in Linear Time
- 前端js优化方案（连续更新）
- java 入门之八大内置基本类型
- RA layer request failed
- elasticSearch+spring 整合 maven依赖详解
- 分布式系列六: WebService简介
- Coursera Deep Learning 2 Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - week1, Assignment(Gradient Checking)
- Linux脚本shell字符串处理
- MySQL服务器监控注意事项
- Cesium Vue开发环境搭建