遇到的问题
在vue-cli3
的项目中,默认的package.json
配置
npm run serve
时会把process.env.NODE_ENV
设置为‘development’
npm run build
时会把process.env.NODE_ENV
设置为‘production’
此时只要根据process.env.NODE_ENV
设置不同请求url
就可以很简单的区分出本地和线上环境。
但是实际真实的项目中,会有测试,预发布等环境。并且vue-cli3
号称0
配置,无法直接修改打包文件,那么怎么区分不同的线上环境呢? 也就是说npm run build
时怎么手动更改process.env.NODE_ENV
?或者配置一个专门的打包命令。
步骤
(1)修改package.json文件
package.json
添加 "build_t": "vue-cli-service build --mode build_t"
(这个是我配置的测试环境)
{
"name": "lsfund",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve", //本地运行,会把process.env.NODE_ENV设置为‘development’
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"build_t": "vue-cli-service build --mode build_t"
// 打包,会把process.env.NODE_ENV设置为步骤2中 '.env.build_t'文件设置的值。
// 注意,这里 "--mode 名字" 要和步骤2中文件名“.env.名字”名字保持一致
}
}
(2)在项目根目录添加文件.env.build_t
NODE_ENV=test
VUE_APP_URL='http://app.hxsapp.com/actweb/lsfund/'
(3)查看是否成功
在vue.config.js
,打印这些变量
console.log('开发环境:'+process.env.NODE_ENV)
console.log('VUE_APP_URL:'+process.env.VUE_APP_URL)
控制台打印
这样在可以在不同的环境里面来配置不同的环境的api地址和路径这些。