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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
各种常用的JS函数整理
Oct 25 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python基于opencv检测程序运行效率
2019/12/28 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
详细分析Python collections工具库
2020/07/16 Python
浅析python连接数据库的重要事项
2021/02/22 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
公司总经理岗位职责
2014/03/15 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
个人向公司借款协议书
2016/03/19 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers