比如我要配置一個(gè)測試環(huán)境用的
在config文件夾里向族,新建一個(gè)pre.env.js(自定義名字)
'use strict'
module.exports = {
NODE_ENV: '"pre"' // 自定義名字
}
在package.json中 script標(biāo)簽里加上一句
"build:pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js"
這里的意思是呵燕,當(dāng)執(zhí)行npm run build:pre時(shí),執(zhí)行config文件里面pre的文件
直接這樣做是會報(bào)錯(cuò)的件相,還要安裝cross-env這個(gè)包
使用 npm install --save cross-env
在使用vue-cli時(shí)再扭,npm run build 是被默認(rèn)寫成執(zhí)行pro(生產(chǎn)環(huán)境)的,因此夜矗,執(zhí)行以上代碼泛范,并沒有正確運(yùn)行測試環(huán)境。
在build文件夾里紊撕,webpack.prod.conf.js文件:
可見原來的env是引入的prod.env:
// const env = require('../config/prod.env')
修改為:
const env = require ('../config/' + process.env.env_config + '.env')
自己可以打印一下 這時(shí)process.env.env_config 所指向的時(shí)npm run build:傳的值
這時(shí)正確使用npm run build:pre 是可以打包成功的罢荡,
但是由于將原本固定的prod.env修改為了動態(tài)的,
所以在執(zhí)行npm run build 會報(bào)錯(cuò)
因?yàn)樵趐ackage.json中 原有的script中build寫的執(zhí)行文件直接是build.js,指向的是原來寫死的prod.env.js文件。
需要修改biuld:
"cross-env NODE_ENV=production env_config=prod node build/build.js"
跟build:pre不同的是 node_env需要指向config中的文件名稱区赵,與之對應(yīng)的是env_config的名字惭缰。
這樣便可以打包成功了。
build.js中有一段描述:
const spinner = ora('building for prod....')
可以動態(tài)修改為:
const spinner = ora('building for ' + process.env.env_config)