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

在vue项目的日常开发中， 区分开发、测试和生产环境极其重要， 如果不区分就很容易弄混。

该如何区分呢？

第一步

在项目根目录， 注意是项目根目录， 跟vue.config.js、src文件夹同级。

文件： .env.production

NODE_ENV = "productionDwp"
VUE_APP_TITLE = "productionVUE_APP_TITLEDwp"

文件： .env.test

NODE_ENV = "productionDwp"
VUE_APP_TITLE = "testVUE_APP_TITLEDwp"

第二步

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

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

以上配置完成后

可以在整个项目中获取到以下变量(几乎所有地方)

console.log('---------------------------dwpnb---------------------------');
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 devDwp            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 devDwp            console  =》  process.env.NODE_ENV development
// 生产 vue-cli-service build --mode production        console  =》  process.env.NODE_ENV productionDwp
// 测试 vue-cli-service test --mode test               console  =》  process.env.NODE_ENV productionDwp
console.log('process.env.NODE_ENV', process.env.NODE_ENV);

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

实例

区分不同环境搭建的不同后台环境

let envone = "";
switch (process.env.VUE_APP_TITLE) {
  case 'testVUE_APP_TITLEDwp': // 这里具体可以值为  .env.test 文件中配置的
    envone = '测试环境地址'
    break
  case 'productionVUE_APP_TITLEDwp':  // 同理以上
    envone = '生产地址'
    break
  default:
    envone = '默认开发地址'
}
export {
  envone,
}

最后

能不能求个赞和关注。

不明白的同学可以留言讨论。

有问题的同学也可以留下自己的意见

欢迎指教~

=================================2021.07.31 ==============================

在html文件中使用
在public的静态文件中 可以用这种 插值语法获取到值

	// 是否开启 启动动画 true 开启 false 关闭
      let startAnimation = !true;
      // 生产环境
      const VUE_APP_TITLE = <%= process.env.VUE_APP_TITLE %>;
      if (VUE_APP_TITLE == "productionVUE_APP_TITLE") startAnimation = true;