vue-cli 4.0中区别开发环境和生产环境

vue-cli 4.0区分不同的开发环境

场景,官网表单提交功能中,由于测试环境和生产环境的ip不同,需要的clientid不同,测试在每次部署测试环境的时候都需要我手动修改ip,很是麻烦,所以区分下不同的环境打包。

1.新建三个不同的文件来区分不同的环境,例如我这里是开发(development)、测试(test)和生产(production)
在根目录下创建三个文件
例:

.env.development

NODE_ENV = 'development'
//指定当前环境模式
VUE_APP_CURRENTMODE = 'development'
VUE_APP_BASE_URL = "https://url.net"
VUE_APP_BASE_client_id = "id"
VUE_APP_BASE_client_secret = "secret"
.env.production

NODE_ENV = "production"
//指定当前环境模式
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASE_URL = "url.com"
VUE_APP_BASE_client_id = "id"
VUE_APP_BASE_client_secret = "secret"
.env.test

NODE_ENV = 'test'
//指定当前环境模式
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASE_URL = "url"
VUE_APP_BASE_client_id = "id"
VUE_APP_BASE_client_secret = "secret"

这里三个文件创建完成

2.需要在package.json中配置指定打包
vue-cli 4.0中区别开发环境和生产环境_第1张图片
3.简单使用的方法
vue-cli 4.0中区别开发环境和生产环境_第2张图片

你可能感兴趣的:(vue,vue-cli4.0环境区分,vue.js)