如何修改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 相关文章推荐
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
uniapp实现可滑动选项卡
Oct 21 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
一个好用的分页函数
2006/11/16 PHP
PHP Mysql编程之高级技巧
2008/08/27 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
php中使用url传递数组的方法
2015/02/11 PHP
js option删除代码集合
2008/11/12 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
国培远程培训感言
2014/03/08 职场文书
测绘工程专业求职信
2014/07/15 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server