vue.js根据代码运行环境选择baseurl的方法


Posted in Javascript onFebruary 28, 2018

配置通用的API前缀可以更好在本地通过接口代理转发获取数据、或者部署时在Nginx中做反向代理,但是项目中一旦涉及大量的需要文件上传的部分(文件上传不走Ajax的方法),我们需要考虑更好管理接口的baseURL,项目中 Ajax 请求用 axios ,原始代码如下

修改前

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})
/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}

/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = '/development/api/doi/analys/upload'

优化方法

找到config/dev.env.js 和 config/prod.env.js,在代码添加变量 API_BASEURL(名字自定义)如下:

module.exports = {
 NODE_ENV: '"production"', // PS:不要复制、开发环境和生产环境有区别
 API_BASEURL: '"/development/api/"' // 需要自己添加的代码
}

然后在需要使用baseURL的地方替换为 process.env. API_BASEURL

修改后代码如下

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: process.env.API_BASEURL, // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})
/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}

/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = process.env.API_BASEURL + '/doi/analys/upload'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery键盘事件介绍
Jan 31 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
微信小程序删除处理详解
Aug 16 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
vue+element实现批量删除功能的示例
Feb 28 #Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 #Javascript
React 组件转 Vue 组件的命令写法
Feb 28 #Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 #Javascript
Vue中this.$router.push参数获取方法
Feb 27 #Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 #Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 #Javascript
You might like
PHP编码规范-php coding standard
2007/03/16 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
基于python中__add__函数的用法
2019/11/25 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
快速创建python 虚拟环境
2020/11/28 Python
python selenium 获取接口数据的实现
2020/12/07 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
电子商务专业应届生求职信
2014/05/28 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年调度员工作总结
2014/11/19 职场文书
外科护士长工作总结
2015/08/12 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript