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 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
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 array_flip() 删除数组重复元素
2009/01/14 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js获取页面传来参数的方法
2014/09/06 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
原生js实现分页效果
2020/09/23 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python实现bucket排序算法实例分析
2015/05/04 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python使用matplotlib绘制热图
2018/11/07 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
六查六看剖析材料
2014/02/15 职场文书
网吧员工管理制度
2015/08/05 职场文书