webpack打包使用修改环境变量方法打包不同文件

通过环境变量传参，在不修改任务代码的情况下执行不同的逻辑。（打包命令也只需要yarn build）

只需要一个.env文件

//默认一个环境变量
VUE_APP_SITE = one

在终端执行修改环境变量命令

export VUE_APP_SITE=two

在main.js中根据不同的环境变量做出相应配置

if (process.env.VUE_APP_SITE === 'one') {
    console.log('生产环境  one');
    localStorage.setItem('site', 'two');
} else if (process.env.VUE_APP_SITE === 'two') {
    console.log('生产环境   two');
    localStorage.setItem('site', 'dev');
} else {
    console.log('开发环境   dev');
    localStorage.setItem('site', 'dev');
}

需要不同的打包命令：

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', '');
}