配置多環(huán)境打包

在根目錄下添加幾個(gè)文件

1.添加 .env

NODE_ENV = development
VUE_APP_BASEURL = 'window.location.origin'  // 網(wǎng)絡(luò)請(qǐng)求地址

2.添加.env.prod

NODE_ENV = production
VUE_APP_URL = prod
VUE_APP_BASEURL = 'window.location.origin'  // 網(wǎng)絡(luò)請(qǐng)求地址

3.添加.env.beta

NODE_ENV = production
VUE_APP_URL = beta
VUE_APP_BASEURL = 'window.location.origin'  // 網(wǎng)絡(luò)請(qǐng)求地址

修改 vue.config.js

module.exports = {
  publicPath: process.env.VUE_APP_URL
}

修改 index.js

export default new Router({
  base: process.env.VUE_APP_URL
})

修改package.json

"scripts": {
    "serve": "vue-cli-service serve --mode",
    "build": "vue-cli-service build --mode prod",
    "beta": "vue-cli-service build --mode beta",
  },

到這里，多環(huán)境已經(jīng)配置完畢

項(xiàng)目中可以通過 process.env.[key] 去做權(quán)限判斷

默認(rèn)打包后的文件名字是 dist 如果想要指定名稱，你可以這樣做

1.修改啟動(dòng)命令 在后面加上 --dest [name]
例如我想要打包后的名字是 beta

"beta": "vue-cli-service build --mode beta --dest beta",

2.修改 .gitignore

.DS_Store
···
/beta

這個(gè)操作是為了防止提交代碼時(shí)將部署文件一并提交

如果你發(fā)現(xiàn)打包后的體積超級(jí)大

修改NODE_ENV = 'production' --> NODE_ENV = production

完美，這就是全部的解決方案了！??！