如何修改Vue打包后文件的接口地址配置的方法


Posted in Javascript onApril 22, 2020

1、背景

常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.jsprod.env.js 做相应的配置即可。但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的。如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效。那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢?

2、可选方案

进行了调研后,网上介绍的方案有2种:

1)在static上设置一个config.js,把配置的参数设置成 window 下的全局变量。这种方案的确可行,但是,但是,不安全!!! 如果请求地址被恶意修改,后果不太好~

2)使用 generate-asset-webpack-plugin 插件,配置一大坨后生成一个静态文件,然后通过请求的方式,获取需要的数据,这种方法可以解决安全性问题,但是,但是,有点小麻烦啊~

因此,博主根据实际项目,将两种方法结合在一起,形成了一个中和的方案。

3、执行方案配置步骤

第一步:在 static 文件夹中新建一个 config.json,把你要写的配置写入

{
// 基本访问地址
"BASE_URL": "http://webhmy.com"
}

放在static下的文件,可以被直接访问。

第二步:在 main.js 中请求定义的配置文件,并放到 Vue.prototype 中,使全局可访问,注意,这里把new Vue()放在请求里执行,是防止请求与页面渲染之间的时间差异化导致值获取不到,因此这样比较保险。

// 定义外部接口可配置
import axios from 'axios'
let startApp = function () {
 axios.get('/static/config.json').then((res) => {
  // 基础地址
  Vue.prototype.BASE_URL = res.BASE_URL;

  new Vue({
   el: '#app',
   router,
   store,
   components: {
    App
   },
   template: '<App/>'
  })
 })
}

startApp()

第三步:如果在 .vue 文件中使用:

console.log(this.BASE_URL)
// http://webhmy.com

如果在一些 .js 文件中,可以调用Vue后再使用:

import Vue from 'vue'
console.log(Vue.prototype.BASE_URL)
// http://webhmy.com

打包修改

执行 npm run build 可以看到打包文件夹 static 文件夹下的 config.json,之后可以修改配置,刷新页面即可。

如何修改Vue打包后文件的接口地址配置的方法

【补充】
因为请求和打包操作的时差性,哪怕它是请求本地的文件,但是有时发现它的请求会比我们系统的第一个请求慢了,这个时候就会失效。

解决方法:相信我们的项目中都对请求进行了一些封装操作,只要将对应的baseURL的值改成实时获取Vue.prototype.BASE_URL的值,就可以保证接口请求能够准确获取到了~

如何修改Vue打包后文件的接口地址配置的方法

到此这篇关于如何修改Vue打包后文件的接口地址配置的方法的文章就介绍到这了,更多相关Vue打包后接口地址配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
canvas绘制多边形
Feb 24 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
微信小程序实现手指拖动选项排序
Apr 22 #Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 #Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 #Javascript
Vue computed 计算属性代码实例
Apr 22 #Javascript
js 解析 JSON 数据简单示例
Apr 21 #Javascript
You might like
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP 文件上传全攻略
2010/04/28 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
python删除文件示例分享
2014/01/28 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python中requests和https使用简单示例
2018/01/18 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
介绍一下gcc特性
2012/01/20 面试题
先进个人事迹材料
2014/01/25 职场文书
社会实践评语
2014/04/28 职场文书
青春演讲稿范文
2014/05/08 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫