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

 

转载于:https://www.cnblogs.com/lsc-boke/p/11316006.html