这篇文章主要讲解了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文件:
import Vue from 'vue';
import axios from 'axios';
const protocolTmp = window.location.protocol; // 获取当前 URL 的协议
const { host } = window.location; // 获取当前host
<!--请求配置信息-->
async function getServerConfig() {
return new Promise(async (resolve, reject) => {
await axios.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 :
import Qs from "qs"
import Vue from 'vue';
export default function (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
// request interceptor
e.$axios.interceptors.request.use(
config => {
// do something before request is sent
if (config.method == 'post') {
config.data = Qs.stringify(config.data)
}
return config
},
error => {
// do something with request error
return Promise.reject(error)
}
)
// response interceptor
e.$axios.interceptors.response.use(
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
if (response.status === 200 && res.code == 1000) {
return res
} else {
// redirect('/404')
// if the custom code is not 200, it is judged as an error.
}
return Promise.reject({ code: res.code, msg: res.msg || 'Error' })
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
e.$axios.onError(error => {
const code = parseInt(error.response && error.response.status)
if (code === 400) {
// redirect('/400')
console.log('$axios.onError :', error)
}
})
}
看完上述内容,是不是对nuxt+axios如何实现打包后动态修改请求地址有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。