vue项目接口域名动态获取操作
需求：
接口域名是从外部.json文件里获取的。
思路：
在开始加载项目前进行接口域名获取，然后重置接口域名的配置项。
实现：
1、config/index.js文件进行基础配置
importaxiosfrom'axios'
constconfig={
requestUrl:'http://qiniu.eightyin.cn/path.json',//动态域名所在地址
baseUrl:{
dev:'/api/',
pro:'http://xxx.com/'//接口域名，会被动态覆盖
},
requestRemoteIp:()=>{//动态获取
returnnewPromise((resolve,reject)=>{
axios.get(config.requestUrl).then(response=>
{
config.baseUrl.pro=response.data.data.path;
config.img.domain=config.baseUrl.pro;
resolve()
},err=>{
reject()
});
});
}
}
exportdefaultconfig
2、项目下main.js文件进行动态获取
importconfigfrom'@/config/index.js'
//读取接口域名
config.requestRemoteIp().finally(res=>{
/*eslint-disableno-new*/
newVue({
el:'#app',
router,
components:{App},
template:'
3、请求数据
constinstance=axios.create({
baseURL:process.env.NODE_ENV==='development'?config.baseUrl.dev:config.baseUrl.pro
})
补充知识：webpack+vue打包生成公共配置文件（域名）方便动态修改
需求原因
原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。
第一步安装插件
npminstall--save-devgenerate-asset-webpack-plugin
第二步新建配置文件
在项目的根目录下新建serverConfig.json以后会根据这个文件去生成打包的配置文件
{"ProdUrl":"http://text.com"}
第三步引入generate-asset-webpack-plugin
在build/webpack.prod.conf.js中添加
constGenerateAssetPlugin=require('generate-asset-webpack-plugin');
constserverConfig=require('../serverConfig.json')；//引入根目录下的配置文件
constcreateJson=function(){
returnJSON.stringify(serverConfig);
};
//plugins中使用
plugins:[
//打包时生成一个配置文件
newGenerateAssetPlugin({
filename:'serverConfig.json',
fn:(compilation,cb)=>{
cb(null,createJson());
},
}),
]
第四步使用配置文件中的内容
这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用。在main.js中vue实例初始化之前将baseURL存到本地
axios.get('serverConfig.json').then(e=>{
letbaseURL=e.data.ProdUrl
localStorage.setItem("baseURL",baseURL);
newVue({
el:'#app',
router,
store,
i18n,
render:h=>h(App)
})
})
由于是使用axios获取，是异步方法，根据情况进行处理。、
好了接下来就再也不用为了域名每天build了
打包后的目录
以上这篇vue项目接口域名动态获取操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。