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>结果