nuxt+axios实现打包后动态修改请求地址的方法
2020-04-23 18:16
1996 查看
需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译。
这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包。功能不变时,单单是修改一下请求地址省了不少功夫。
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) } }) }
3. 最后
到此这篇关于nuxt+axios实现打包后动态修改请求地址的方法的文章就介绍到这了,更多相关nuxt+axios 打包后动态修改请求地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- springmvc 动态修改返回值类型,实现方法既能被ajax调用,又能被同步请求调用
- JS动态修改iframe内嵌网页地址的方法
- CentOS 6.6实现永久修改DNS地址的方法
- js动态修改input输入框的type属性(实现方法解析)
- vue实践笔记系列八——动态修改打包后的服务器地址
- Python基于scapy实现修改IP发送请求的方法示例
- 利用Django中的url方法实现地址动态拼接自动生成超链接地址
- 如何修改Vue打包后文件的接口地址配置的方法
- 动态修改WCF客户端配置文件终结点的地址的几种方法
- JS实现动态修改table及合并单元格的方法示例
- js动态修改input输入框的type属性(实现方法解析)
- vue 动态改变静态图片以及请求网络图片的实现方法
- 利用Django中的url方法实现地址动态拼接自动生成超链接地址
- 记一次vue打包之后动态修改请求根路径 vue-cli2.x 有效 开发阶段通过动态代理请求访问后台
- Mybatis 实现不确定修改几个字段的修改方法(动态语句set、if实现),避免修改时其它没被修改的字段变为null
- 动态修改WCF客户端配置文件终结点的地址的几种方法
- MAC Tree 实现的方法(NSOutlineView) 2 (实现了简单的选择和动态修改不同的数据)
- jQuery动态修改超链接地址的方法
- TImer定时器的方法schedule和scheduleAtFixedRate区别已经动态修改定时计划的实现
- iOS_Runtime修改变量值,交换方法实现,动态添加类,成员变量和方法