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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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 文件上传全攻略
2010/04/28 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
使用URL传输SESSION信息
2015/07/14 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python入门篇之正则表达式
2014/10/20 Python
Python中的zipfile模块使用详解
2015/06/25 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python时间time模块处理大全
2020/10/25 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
《尊严》教学反思
2014/02/11 职场文书
离婚协议书范本2014
2014/10/27 职场文书
社区工作者个人总结
2015/02/28 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
安全教育日主题班会
2015/08/13 职场文书
《观察物体》教学反思
2016/02/17 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL