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 相关文章推荐
JavaScript代码复用模式实例分析
Dec 02 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
js实现文字滚动效果
Mar 03 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
JS中type="button"和type="submit"的区别
Jul 04 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
js实现简单五子棋游戏
May 28 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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
linux实现php定时执行cron任务详解
2013/12/24 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
vuex 的简单使用
2018/03/22 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Django操作session 的方法
2020/03/09 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
python实现登录与注册系统
2020/11/30 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
万能检讨书
2015/01/27 职场文书
开会通知
2015/04/20 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技