前端VUE环境变量配置打包(生产、测试环境)

5,603 阅读1分钟

生产、测试环境不同模式打包

第一步

package.json中加入打包模式 image.png 例上图: build:prod 生产环境打包
                build:stage 测试环境打包

第二步

新增 .env.staging文件、 .env.production文件 image.png 文件内配置环境变量:NODE_ENV=test、NODE_ENV=prod

第三步

接口域名不能写死,写死打包出来就不能动态区分生产环境或者测试环境。根据第二步骤我们配置的环境变量将这个地方写成配置好的环境环境变量名称; image.png

第四步

生产打包:npm run build:prod
测试打包:npm run build:stage
打包出来的接口就是我们对应文件配置好的环境变量了~

番外

.env.staging文件、 .env.production 需要在文件配置NODE_ENV 打包后config做判断哦~【process.env.NODE_ENV】 image.png