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 ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
理解JS绑定事件
Jan 19 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 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服务器实现多session并发运行
2006/10/09 PHP
php之XML转数组函数的详解
2013/06/07 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php如何获取文件的扩展名
2015/10/28 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python队列、进程间通信、线程案例
2019/10/25 Python
Django 解决由save方法引发的错误
2020/05/21 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
C#中的验证控件有几种
2014/03/08 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
JSF的标签库有哪些
2012/04/27 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
工作过失检讨书
2014/02/23 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python