vue项目如何区分开发、生产和测试环境

1.在项目根目录， 注意是项目根目录， 跟vue.config.js、src文件夹同级。
新建文件： .env.production

NODE_ENV = "production"
VUE_APP_TITLE = "productionVUE_APP_TITLE"

和文件： .env.test

NODE_ENV = "production"
VUE_APP_TITLE = "testVUE_APP_TITLE"

2.在package.json文件中修改命令配置

{
...
"scripts": {
    "serve": "vue-cli-service serve --mode serve",
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode production",
    "test": "vue-cli-service build --mode test"
  },
...
}

以上配置完成后
可以在整个项目中获取到以下变量(几乎所有地方)

console.log('process.env.npm_lifecycle_event', process.env.npm_lifecycle_event);
console.log('process.env.npm_config_argv', process.env.npm_config_argv);

// console.log(process.env.BABEL_ENV); // development 开发 || production 生产
// 开发 vue-cli-service serve --mode dev            console  =》  process.env.BABEL_ENV development
// 生产 vue-cli-service build --mode production        console  =》  process.env.BABEL_ENV production
// 测试 vue-cli-service build --mode test              console  =》  process.env.BABEL_ENV test
console.log('process.env.BABEL_ENV', process.env.BABEL_ENV);

// 开发 vue-cli-service serve --mode dev           console  =》  process.env.NODE_ENV development
// 生产 vue-cli-service build --mode production        console  =》  process.env.NODE_ENV production
// 测试 vue-cli-service test --mode test               console  =》  process.env.NODE_ENV test
console.log('process.env.NODE_ENV', process.env.NODE_ENV);

// 开发 vue-cli-service serve --mode dev           console  =》  process.env.VUE_APP_TITLE undefined
// 生产 vue-cli-service build --mode production        console  =》  process.env.VUE_APP_TITLE productionVUE_APP_TITLE
// 测试 vue-cli-service test --mode test               console  =》  process.env.VUE_APP_TITLE testVUE_APP_TITLE
console.log('process.env.VUE_APP_TITLE', process.env.VUE_APP_TITLE);