vue.js根据代码运行环境选择baseurl的方法
时间:2019-04-13
本文章向大家介绍vue.js根据代码运行环境选择baseurl的方法,主要包括vue.js根据代码运行环境选择baseurl的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
配置通用的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'
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Django---分页器、中间件
- 启动jenkins服务错误
- 如果未来的AI拥有意识,你舍得不理它吗?
- centos下安装python3
- jboss:在standalone.xml中设置系统属性(system-properties)
- iptables
- Django-form表单
- 比较git commit 两个版本之间次数
- eclipse: workspace出错导致无法启用的解决
- 【node错误】/usr/bin/env: node: No such file or directory
- Django比较相等或者不相等的模板语法ifequal / ifnotequal
- 使用testNGListenter来自定义日志
- 通过代码去执行testNG用例
- $.cookie is not a function;原因及解决办法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 服务端开发人员必备网页调试工具:Postman
- 树莓派使用DHT11模块读取温湿度
- 用Go 写了个负载均衡器
- 给MacBook写一个更好的Windows触摸板驱动程序
- 小程序多图上传服务器接收返回数据操作
- WordPress屏蔽某个国家地方的IP访问
- Linux的php-fpm优化教程/php-fpm进程占用内存大和不释放内存问题
- 基于DNSmasq写了个WEB界面(开源)
- Android Studio3.6新特性之视图绑定ViewBinding使用指南
- Android recyclerView横条指示器实现淘宝菜单模块
- Android studio kotlin代码格式化操作
- Android Studio升级3.6 Build窗口出现中文乱码问题解决方法
- Android中AndroidStudio&Kotlin安装到运行过程及常见问题汇总
- AndroidStudio3.6的卸载安装,Gradle持续下载/Gradle Build失败等问题
- 搭建DNSmasq简单教程带WEB管理面板