Vue打包后如果需要修改后台连接地址需要重新打包问题


Vue打包后如果需要修改后台连接地址需要重新打包问题

之前做的项目使用的是配置文件区分开发环境还是生产环境,打包后这两个文件就消失了,所以如果生产环境的URL忘记修改或者后期有变动就需要重修修改代码重新打包,这样很不方便,然后今天就稍微解决一下这个问题。
在这里插入图片描述

思路

其实这个地方的关键就是把后台配置的URL设置到打包后还存在的文件里面,把相关的URL设置到全局,在需要使用这些URL的地方,判断一下是不是生产环境,如果是,那就使用全局设置的url,如果不是,就去使用配置文件的。

index.html

在index.html文件中添加一段js代码,把后台请求的url配置到全局。

  

使用

在请求的时候判断一下,如果是生产环境,就是用全局的URL

const BASE_URL = process.env.NODE_ENV !== 'production' ? process.env.VUE_APP_BASE_API : window.g.vueAppServerUrl

这样就可以了,如果还有其他的地址,也这样添加进来就可以,如果打包之后需要修改,直接在打包完成的dist文件夹下index.html中修改就可以,修改完成刷新,一切OK了就!

在这里插入图片描述

vue