前言

vue工程在實際應(yīng)用的打包過程中往往需要根據(jù)不同的環(huán)境打上不同的包，這個時候默認(rèn)的模式便不能夠滿足使用了，參考 vue-cli模式我們可以在工程中加入如下配置

步驟

1. 根目錄下新建文件 .env.test env.prod
2. 編輯兩個文件

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

3. 修改 vue.config.js

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

4. 修改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默認(rèn)的打包配置中，有一些配置是根據(jù)環(huán)境變量NODE_ENV去判斷的。筆者一開始在.env文件沒有加入 NODE_ENV=production這一行，導(dǎo)致在切換mode后讀不到該環(huán)境變量，實際上打包的結(jié)果出現(xiàn)了偏差。因此，如果是想在原有的模式上做拓展就需要在.env文件中設(shè)置原來的環(huán)境變量