vue.js根据代码运行环境选择baseurl的方法
2018-02-28 09:08
639 查看
配置通用的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'
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章推荐
- Js+Jq获取URL参数的集中方法示例代码
- thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
- vue.js实现仿原生ios时间选择组件实例代码
- Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及
- js在方法Ajax请求数据来推断,验证无效(OnClientClick="return Method();"),或者直接运行的代码隐藏
- extjs中的JS代码在firefox可以正常运行,在IE中无法运行的方法。
- PHP中使用Node.js根据ip获取地理位置的方法代码
- 关于 vue.js 运行环境的搭建(mac)
- 在vue.js中抽出公共代码的方法示例
- vue.js element-ui validate中代码不执行问题解决方法
- vue.js模仿京东省市区三级联动的选择组件实例代码
- js实现运行代码需要刷新的解决方法
- Vue.js 运行环境搭建详解(基于windows)
- 如何实现多个线程同步 (2013-11-10 12:07:24)转载▼ 标签: it 在编写一个类时,如果该类中的代码可能运行于多线程环境下,那么就要考虑同步的问题,Java实现线程同步的方法很多
- IE不能运行有JS代码的网页处理方法
- Js+Jq获取URL参数的集中方法示例代码
- 【Spring】 (5)根据机器环境不同运行不同代码
- JS 截取字符串substr 和 substring方法的区别,需要的朋友可以参考下,根据需要自行选择。
- 【前端】vue.js环境配置以及实例运行简明教程
- 快速掌握Node.js环境的安装与运行方法