没有合适的资源?快使用搜索试试~ 我知道了~
如何修改Vue打包后文件的接口地址配置的方法
9 下载量 70 浏览量
2020-10-15
10:05:59
上传
评论
收藏 83KB PDF 举报
温馨提示
试读
2页
主要介绍了如何修改Vue打包后文件的接口地址配置的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
资源推荐
资源详情
资源评论
如何修改如何修改Vue打包后文件的接口地址配置的方法打包后文件的接口地址配置的方法
主要介绍了如何修改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_38746818
- 粉丝: 7
- 资源: 910
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功