1.配置npm run 的模式
在項目的根目錄編輯package.json楔脯，分為開發(fā) 測試 生產(chǎn) 甚至更多撩轰。
"scripts": {
"dev": "vue-cli-service serve --mode dev",
"test": "vue-cli-service build --mode test",
"prod": "vue-cli-service build --mode prod"
},
2.創(chuàng)建環(huán)境配置文件
在項目的根目錄新建以下文件
.env.dev .env.test .env.prod
.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入昧廷，但會被 git 忽略
3.配置環(huán)境的默認(rèn)變量
只能配置 NODE_ENV=production webpack的讀取NODE_ENV配置才啟用壓縮邏輯堪嫂，默認(rèn)是dev的NODE_ENV所以打包出來特別大
NODE_ENV = 'production'
4.配置.env環(huán)境的業(yè)務(wù)變量
VUE_APP_NAME= 'abc'
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。你可以在應(yīng)用的代碼中這樣訪問它們：
console.log(process.env.VUE_APP_NAME)
5.實際應(yīng)用（以打包地址為 bengbuh5 為例）
一木柬、配置vue.config.js
publicPath: "/" + process.env.VUE_APP_NAME,
outputDir: process.env.VUE_APP_NAME,
二皆串、新建兩個文件 .env.bengbuh5和.env.bengbuh5.local
.env.bengbuh5
NODE_ENV='production'
.env.bengbuh5.local
VUE_APP_NAME='bengbuh5'
三、配置命令在package.json的scripts中
"bengbuh5": "vue-cli-service build --mode bengbuh5",
四眉枕、運行命令
npm run bengbuh5
五恶复、改git提交時配置
由于 .env.[mode].local 會被 git 忽略，想提交上此類文件代碼需要更改.gitignore文件
將如下代碼注釋（此類文件#是注釋）
# .env.*.local
6.另一種方式（以打包地址為 bengbuh5 為例）
一速挑、安裝cross-env
npm install --save-dev cross-env
二谤牡、配置命令在package.json的scripts中
"bengbuh5": "cross-env NODE_ENV=production VUE_APP_NAME=bengbuh5 vue-cli-service build",
三、配置vue.config.js
publicPath: "/" + process.env.VUE_APP_NAME,
outputDir: process.env.VUE_APP_NAME,
ps:
cross-env使得您可以使用單個命令姥宝，而不必?fù)?dān)心為平臺正確設(shè)置或使用環(huán)境變量翅萤。 只要在POSIX系統(tǒng)上運行就可以設(shè)置好，而cross-env將會正確地設(shè)置它腊满。
說人話: 這個迷你的包(cross-env)能夠提供一個設(shè)置環(huán)境變量的scripts套么，讓你能夠以unix方式設(shè)置環(huán)境變量，然后在windows上也能兼容運行碳蛋。
