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

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

参考资料：

🔗