前言

vue工程在实际应用的打包过程中往往需要根据不同的环境打上不同的包，这个时候默认的模式便不能够满足使用了，参考 vue-cli模式我们可以在工程中加入如下配置

步骤

根目录下新建文件 .env.test env.prod
编辑两个文件

//.env.test
NODE_ENV=production
VUE_APP_ENV = 'test'
// .env.prod 
NODE_ENV=production
VUE_APP_ENV = 'prod'

修改 vue.config.js

const path = require('path')
const isSourceMap = process.env.VUE_APP_ENV==='test'?true:false
module.exports = {
  runtimeCompiler: true,
  productionSourceMap: isSourceMap
    
}

修改package.json

{
    "script":{
        "build:library-test":"vue-cli-service build --mode test --target lib --dest dist src/library.js",
        "build:library-prod":"vue-cli-service build --mode prod --target lib --dest dist src/library.js",
    }
}

注意事项

笔者在使用中因为文档没摸清楚，走了点弯路。因为VUE默认的打包配置中，有一些配置是根据环境变量NODE_ENV去判断的。笔者一开始在.env文件没有加入 NODE_ENV=production这一行，导致在切换mode后读不到该环境变量，实际上打包的结果出现了偏差。因此，如果是想在原有的模式上做拓展就需要在.env文件中设置原来的环境变量