nuxt+axios实现打包后动态修改请求地址的方法
需求：把请求地址等一些配置暴露出来以便打包后动态修改，而不需要重新打包编译。
这样也是挺不错的，当一个项目需要部署到几个不同的服务器上时候，就不用说每次都要修改后再重新打包。功能不变时，单单是修改一下请求地址省了不少功夫。
1.开始
把需要动态修改的配置写在一个配置json文件里面。该配置文件可以放在static目录下：
静态文件目录：静态文件目录static用于存放应用的静态文件，此类文件不会被Nuxt.js调用Webpack进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径/下。
2.实现
在static下新建baseConfig.json文件,把需要暴露出来的配置写上，先上代码：
{
"video_dir":"video/",
"base_host":"http://xxxxx"
"request_prefix":'/api/'
}
有需求的可以扩展配置文件(想怎么写就怎么写，开心就行~)，例如可以根据不用的环境（开发、生产）切换等；
在plugis文件夹下新建baseConfig.js文件：
importVuefrom'vue';
importaxiosfrom'axios';
constprotocolTmp=window.location.protocol;//获取当前URL的协议
const{host}=window.location;//获取当前host
asyncfunctiongetServerConfig(){
returnnewPromise(async(resolve,reject)=>{
awaitaxios.get(`${protocolTmp}//${host}/baseConfig.json`).then((result)=>{
const{base_host,video_dir,request_prefix}=result.data;
//把配置挂载在Vue属性上，以便调用
Vue.prototype.$base_host=base_host;
Vue.prototype.$request_prefix=request_prefix;
Vue.prototype.$video_dir=video_dir;
resolve();
}).catch((error)=>{
console.log('error',error);
reject();
});
});
}
getServerConfig();
在项目配置文件nuxt.config.js中引入：
plugins:[ ... '~/plugins/pathConfig' ],
最后在axios里面配置使用，完事。axios.js:
importQsfrom"qs"
importVuefrom'vue';
exportdefaultfunction(e){
//e.$axios.defaults.baseURL='http://xxxxxxx/api/'
//e.$axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
e.$axios.defaults.baseURL=Vue.prototype.$base_host+Vue.prototype.$request_prefix
//requestinterceptor
e.$axios.interceptors.request.use(
config=>{
//dosomethingbeforerequestissent
if(config.method=='post'){
config.data=Qs.stringify(config.data)
}
returnconfig
},
error=>{
//dosomethingwithrequesterror
returnPromise.reject(error)
}
)
//responseinterceptor
e.$axios.interceptors.response.use(
/**
*Determinetherequeststatusbycustomcode
*Hereisjustanexample
*YoucanalsojudgethestatusbyHTTPStatusCode
*/
response=>{
constres=response.data
if(response.status===200&&res.code==1000){
returnres
}else{
//redirect('/404')
//ifthecustomcodeisnot200,itisjudgedasanerror.
}
returnPromise.reject({code:res.code,msg:res.msg||'Error'})
},
error=>{
console.log('err'+error)//fordebug
returnPromise.reject(error)
}
)
e.$axios.onError(error=>{
constcode=parseInt(error.response&&error.response.status)
if(code===400){
//redirect('/400')
console.log('$axios.onError:',error)
}
})
}
3.最后
到此这篇关于nuxt+axios实现打包后动态修改请求地址的方法的文章就介绍到这了,更多相关nuxt+axios打包后动态修改请求地址内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！