vue-cli3+ts的webpack 測試，開發，部署環境配置

1>首先在package里面的scripts加上

"test": "vue-cli-service build --mode test"

2>在根目錄上面創建3個配置文件，這里有個重點

VUE_APP_   相當於一種全局變量的命名

.env文件對應的是開發模式，

NODE_ENV = 'development'
VUE_APP_FLAG = '7889546'
VUE_APP_URL = 'www.lili.com'

.env.production文件對應的是部署環境

NODE_ENV = 'production'
VUE_APP_FLAG = 'production1'
outputDir = dist  

.env.test對應的是測試環境

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test  

3>vue.config.js文件下

  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置...
    } else if (process.env.NODE_ENV === 'development') {
      // 為開發環境修改配置...
      process.env.BASE_URL = 'www.lilei.com';
    } else if (process.env.NODE_ENV === 'test') {
      // 為測試環境修改配置...
    }
  }

4>public/config/index.ts文件下

const peconfig = process.env;
var tes1 = null;
console.log(process.env);
switch (process.env.NODE_ENV) {
  case 'development':
    tes1 = 'www.開發的.com';
    break;
  case 'production':
    tes1 = 'www.部署的.com';
    break;
  case 'test':
    tes1 = 'www.測試的.com';
    break;
}
export default { peconfig, tes1 };

5>main.ts

import test1 from '../public/config';
console.log('pub', test1);

6>結果