nuxt+axios实现打包后动态修改请求地址的方法


Posted in Javascript onApril 22, 2020

需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译。

这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包。功能不变时,单单是修改一下请求地址省了不少功夫。

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 打包后动态修改请求地址内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
微信小程序实现多选功能
Nov 04 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
微信小程序实现手指拖动选项排序
Apr 22 #Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 #Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 #Javascript
Vue computed 计算属性代码实例
Apr 22 #Javascript
js 解析 JSON 数据简单示例
Apr 21 #Javascript
react 原生实现头像滚动播放的示例
Apr 21 #Javascript
You might like
SSI指令
2006/11/25 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
vue实现图片上传功能
2020/05/28 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
python循环监控远程端口的方法
2015/03/14 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
会计岗位职责
2013/11/08 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
电子商务专业求职信
2014/03/08 职场文书
单位实习鉴定评语
2015/01/04 职场文书
长城导游词400字
2015/01/30 职场文书
环境卫生整治简报
2015/07/20 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android