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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
Javascript 解疑
Nov 11 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
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
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python提取网页中超链接的方法
2016/09/18 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
详解Python 解压缩文件
2019/04/09 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
什么是Remote Module
2016/06/10 面试题
工作中的自我评价如何写好
2013/10/28 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电