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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
小程序实现图片移动缩放效果
May 26 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连接access数据库
2015/03/27 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
Python3处理文件中每个词的方法
2015/05/22 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
SQL注入攻击的种类有哪些
2013/12/30 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
生日主持词
2014/03/20 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
反腐倡廉标语
2014/06/24 职场文书
学校四风对照检查材料
2014/08/28 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
骨干教师考核评语
2014/12/31 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
详解python网络进程
2021/06/15 Python
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
SpringBoot详解执行过程
2022/07/15 Java/Android
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技