vue 在服务器端直接修改请求的接口地址


Posted in Vue.js onDecember 19, 2020

一个项目可能有很多环境,开发,测试,预生产,生产等环境,如果每一个环境都需要重新打包会显得比较麻烦,那么如何解决这个问题呢

在vue和uniapp中以及其他框架下的都是可以按照如下操作来解决的

在静态资源下新建一个env.json,vue项目是在public文件下新建,uniapp是在static下新建文件

文件格式如下

{
  "name": "development",
  "base": "/customer"
}

name,代表的是环境,方便直接在服务器上查看当前是什么环境的,base是请求的地址,如果服务器没有做代理的话,这里的base应该是完整的请求地址http:// xxxxx.com/customer,类似这种

一般人在处理的时候总是获取不到这个env.json里的地址,是因为,这里是因为异步导致的,如果要解决的话,可以在main.js或者是main.ts中如何操作

axios.get('./env.json')
 .then(function (res: any) {
  // handle success

Vue.prototype.BASE_URL = res.data.base;
  new Vue({
   router,
   store,
   render: h => h(App)
  }).$mount('#app')
 })

这样有个问题就是一定是在请求这个json成功之后项目才会开始渲染的,这个时间可以做一个加载动画,请求应该是很快的,如果请求失败,你可以在axios里做一个catch操作,给一个友好的提示什么的,进行重新请求

那么如何获取了?

可以在拦截器中进行获取然后拼接请求地址

在拦截器的那个js文件中

function getBaseUrl() {
  return Vue.prototype.BASE_URL
}

最后在传入url的时候进行拼接,如下
url: getBaseUrl() + opts.url, // opts是传过来的参数对象

就这样就可以正常请求了

一般开发环境下你env.json里可以配置你的开发地址,最后通过自动化打包部署到服务器上去之后,如果要换成其他环境(测试,预生产,生产)的地址,可以直接在服务器上直接修改这个env.json文件即可,

大功告成,哈哈

以上就是vue 在服务器端直接修改请求的接口地址的详细内容,更多关于vue 修改请求接口地址的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
vue 通过base64实现图片下载功能
Dec 19 #Vue.js
Vue中computed和watch有哪些区别
Dec 19 #Vue.js
Vue与React的区别和优势对比
Dec 18 #Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 #Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
You might like
PHP两种快速排序算法实例
2015/02/15 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python 读写文件的操作代码
2018/09/20 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
50道外企软件测试面试题
2014/08/18 面试题
师德建设实施方案
2014/03/21 职场文书
国际商务专业求职信
2014/07/15 职场文书
与死神共舞观后感
2015/06/15 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
python基础之while循环语句的使用
2021/04/20 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android