vue项目打包后 希望可以修改配置(接口地址,系统名称等)
需求:
项目打包发布,之后可能存在接口域名更换,项目名称修改等情况,就需要开发人员重新修改代码,重新发布,比较费时费力。希望可以将这些配置在一个文件中,如需更换,运维可直接打开配置文件,更改保存即生效。
实现:
【一】:Vue项目下找到public文件夹(没有public的找到static文件夹),在该文件夹下建 config.js 文件(文件名随意)
写入代码:(下面都以static的为例)
window.g = { localBaseUrl: 'http://xx.249.3.124:19088/sjgj', // 本项目地址 middleBaseUrl: 'http://xx.249.3.124:19013', // 中台地址 };
【二】:在 项目 index.html 文件中引入该文件
<script src="./static/config.js"></script>
【三】:页面中使用
// 例如 const baseURL = process.env.NODE_ENV === 'development' ? 'http://xxx.xxx.xxx.xxx:10087' : window.g.localBaseUrl const authURL = process.env.NODE_ENV === 'development' ? 'http://xxx.xxx.xxx.xxx:9833' : window.g.middleBaseUrl
总结:
以上配置后,在我们项目打包后可以看到多了个 config.js 文件,如需修改相关配置,运维人员可自行更改。如配置更改后不生效,可清除浏览器缓存后再查看。