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和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS制作简单的三级联动
Mar 18 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
eslint 的三大通用规则详解
May 16 Javascript
详解TypeScript的基础类型
Feb 18 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
jQuery 动画基础教程
2008/12/25 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
浅析TypeScript 命名空间
2020/03/19 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
2015年元旦活动总结
2014/05/09 职场文书
中职招生先进个人材料
2014/08/31 职场文书
紧急通知
2015/04/17 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书