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

这篇文章主要讲解了修改Vue打包后文件的接口地址配置的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

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

<强>

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

1)在静态上设置一个<代码>配置。js> 窗口下的全局变量。这种方案的确可行,但是,但是,不安全! ! !如果请求地址被恶意修改,后果不太好~

2)使用<代码> generate-asset-webpack-plugin>

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

第一步:在<代码>静态代码文件夹中新建一个<代码>配置。json> {//基本访问地址 　　“BASE_URL":“http://webhmy.com" 　　}

放在<代码>静态>

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

//定义外部接口可配置
　　从& # 39;进口axios axios& # 39;
　　让startApp=function () {
　　axios.get(& # 39;/静态/json # 39;),然后((res)=比;{//基础地址
　　Vue.prototype。BASE_URL=res.BASE_URL;
　　
　　新Vue ({
　　艾尔:& # 39;#应用# 39;
　　路由器,
　　商店,
　　组件:{
　　应用程序
　　},
　　模板:& # 39;& lt;应用程序/祝辞& # 39;
　　})
　　})
　　}
　　
　　startApp () 

第三步:如果在<代码>。vue 文件中使用:

从& # 39;进口Vue Vue # 39;
　　console.log (Vue.prototype.BASE_URL)//http://webhmy.com