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实现等比例缩放图片效果插件
Jul 24 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
javascript操作表格排序实例分析
May 06 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 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&&mysql)三
2006/10/09 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP面向对象法则
2012/02/23 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
Python中条件判断语句的简单使用方法
2015/08/21 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
js实现弹框效果
2021/03/24 Javascript
环保建议书600字
2014/05/14 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL