如何修改如何修改Vue打包后文件的接口地址配置的方法打包后文件的接口地址配置的方法
1、背景、背景
常规的vue项目分为本地环境和生产环境，我们只要对 config 文件夹下的 dev.env.js 和 prod.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，之后可以修改配置，刷新页面即可。
weixin_38737283
- 粉丝: 3
- 资源: 905
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- BSC关键绩效财务与客户指标详解
- 绘制企业战略地图：从财务到客户价值的六步法
- BSC关键绩效指标详解：财务与运营效率评估
- 手持移动数据终端：常见问题与WIFI设置指南
- 平衡计分卡（BSC）：绩效管理与战略实施工具
- ESP8266智能家居控制系统设计与实现
- ESP8266在智能家居中的应用——网络家电控制系统
- BSC：平衡计分卡在绩效管理与信息技术中的应用
- 手持移动数据终端：常见问题与解决办法
- BSC模板：四大领域关键绩效指标详解(财务、客户、运营与成长)
- BSC：从绩效考核到计算机网络的关键概念
- BSC模板：四大维度关键绩效指标详解与预算达成分析
- 平衡计分卡（BSC）：绩效考核与战略实施工具
- K-means聚类算法详解及其优缺点
- 平衡计分卡（BSC）：从绩效考核到战略实施
- BSC：平衡计分卡与计算机网络中的应用
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
