vue3 不同环境(开发、测试、生产)打包配置

需求

在Vue3.X中，执行package.json Script 脚本命令，在项目中配置不同(本地、测试、生产)环境的API URL

实现原理

创建.env文件，在env文件中添加URL 常量，配置打包命令对应的env文件，获取不同env文件中定义URL常量值。

配置步骤

创建3个.env文件

每个文件中添加VUE_APP_URL和VUE_APP_FLAG常量

常量定义规范：VUE_APP_[自定义name]

• 文件名：.env 【打包生产环境】

VUE_APP_URL=https://xxx.xxx.com
VUE_APP_FLAG = 'prod'

• 文件名：.env.test 【打包测试环境】

文件中需要额外增加一个NODE_ENV = 'production'的参数，否则在package.json中执行测试脚本命令时，不会将js和css文件打包至dist。

NODE_ENV = 'production'
VUE_APP_URL=http://xxx.xx.xx.xxx:8085/wxpublic
VUE_APP_FLAG = 'test'

• 文件名：.env.development 【打包本地开发环境】

VUE_APP_URL=http://localhost:8088/wxpublic
VUE_APP_FLAG = 'dev'

配置脚本

在package.json中，在scripts对象中增加testbuild脚本，其中–mode test命令对应文件名env.test
代码如下：

"testbuild": "vue-cli-service build --mode test"

代码调用

在网络请求或axios中，访问process.env.VUE_APP_URL得到API BaseURL

执行脚本

右键package.json文件，点击show npm Scripts菜单，双击命令打包不同环境文件。

其他

1、本机环境：@vue-cli3.12.1
2、IDE：WebStorm2018.3.2

参考资料：

🔗
[1]: https://cli.vuejs.org/zh/config/#publicpath
[2]: https://blog.csdn.net/qq_36407748/article/details/82050976
[2]: https://blog.csdn.net/qq_37055675/article/details/85047451
[3]: https://www.jianshu.com/p/9b6ccd14d184