webpack根据不同打包命令(不同环境)打包不同文件

1.在源文件中新建.env文件

需要什么环境变量就新建对应的env文件
.env.product

NODE_ENV = product

.env.test

NODE_ENV = test

2.在package.json中区分不同环境打包命令

"scripts": {
        "serve": "vue-cli-service serve",
        //mode 后边是env.后缀的文件名，表示此打包应该读取哪个env文件
        "build": "vue-cli-service build --mode product",
        "build:test": "vue-cli-service build --mode test",
        "lint": "vue-cli-service lint"
    },

3.在main.js中判断

if (process.env.NODE_ENV === 'product') {
    console.log('生产环境');
    localStorage.setItem('build', 'product');
} else if (process.env.NODE_ENV === 'test') {
    localStorage.setItem('build', 'test');
    console.log('测试环境');
} else {
    localStorage.setItem('build', '');
}