vue3 不同环境(开发、测试、生产)打包配置
Vue3不同环境(开发、测试、生产)打包配置需求实现原理配置步骤创建3个.env文件配置脚本代码调用执行脚本其他参考资料:需求在Vue3.X中,执行package.json Script 脚本命令,在项目中配置不同(本地、测试、生产)环境的API URL实现原理创建.env文件,在env文件中添加URL 常量,配置打包命令对应的env文件,获取不同env文件中定义URL常量值。配置步骤...
需求
在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
更多推荐
所有评论(0)