在項(xiàng)目開(kāi)發(fā)中，我們往往需要區(qū)分開(kāi)發(fā)版、測(cè)試版、pre版、prod版，如果每次打包前都要去修改API地址就太麻煩了，那么如何根據(jù)不同的環(huán)境打包呢？
1、安裝cross-env
?npm i --save-dev cross-env
2、修改各環(huán)境下的參數(shù)
1）在config文件夾下新建pre.env.js和test.env.js文件
2）修改prod.env.js文件的內(nèi)容
'use strict'
module.exports = {? ?
? ? ?NODE_ENV: '"prod"',? ??
? ? BASE_URL: '"http://www.aaa.com/prod"'? ?//?這里寫(xiě)生產(chǎn)環(huán)境地址?
?}? ?
3）修改pre.env.js文件的內(nèi)容
'use strict'
module.exports = {? ??
? ?NODE_ENV: '"pre"',? ? ?
? BASE_URL: '"http://www.aaa.com/pre"'? ?//?這里寫(xiě)預(yù)上線(xiàn)環(huán)境地址?
?}? ?
4）修改test.env.js文件內(nèi)容
'use strict'
module.exports = {? ? ?
? ? NODE_ENV: '"test"',? ? ??
? ? BASE_URL: '"http://www.aaa.com/test"'? ?//?這里寫(xiě)測(cè)試環(huán)境地址??
}??
5）修改dev.env.js文件內(nèi)容，讓其去合并測(cè)試環(huán)境的url
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./test.env')? ? //?將此處的./prod.env修改為./test.env?
// 合并測(cè)試上的，不用寫(xiě)東西
module.exports = merge(prodEnv, {
? ? ?NODE_ENV: '"development"'
})
6）修改webpack.prod.conf.js文件
? ?將const env = require('../config/prod.env')改為如下：
const nodeEnv = process.env.NODE_ENV
const env = require(`../config/${nodeEnv}.env`)
7）修改build.js文件
? ? 將process.env.NODE_ENV = 'production'改為如下：
const nodeEnv = process.env.NODE_ENV
? ? 將const spinner = ora(‘production’)改為：
let text = ''
switch (nodeEnv) {
case 'prod' :
? text = {
? ? color: 'green',
? ? text: '正在為生產(chǎn)環(huán)境打包.......'
? }
break;
case 'pre' :
? text = {
? ? color: 'blue',
? ? text: '正在為預(yù)上線(xiàn)環(huán)境打包.......'
? }
break;
case 'test' :
? text = {
? ? color: 'red',
? ? text: '正在為測(cè)試環(huán)境打包.......'
? }
}
const spinner = ora(text)
8）修改?package.json文件
"scripts": {
? ?"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
? ?"start": "npm run dev", "lint": "eslint --ext .js,.vue src",
? ?"build:prod": "cross-env NODE_ENV=prod node build/build.js",
? ?"build:dev": "cross-env NODE_ENV=test node build/build.js",
? ?"build:pre": "cross-env NODE_ENV=pre node build/build.js"
},
到此，執(zhí)行不同的打包命令可以了。
打包配置好之后，還需要對(duì)項(xiàng)目進(jìn)行進(jìn)一步的優(yōu)化，如使用CDN資源和gzip壓縮
1.使用CDN資源
使用CDN在index.html文件中引入（我用的是BootCDN）
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
修改build/webpack.base.conf.js文件
module.exports = {
????// CDN
????externals: {?
? ??????'vue': 'Vue',
? ???????'vue-router': 'VueRouter',?
? ??????'vuex': 'Vuex',
? ???????'element-ui':'ELEMENT',?
? ??????'axios':'axios'
? ??}
}
最后將main.js文件中的引入注釋掉，個(gè)人測(cè)試了一下，不注釋掉的話(huà)，打包體積也是會(huì)縮小的，因?yàn)榇虬a(chǎn)環(huán)境時(shí)，運(yùn)行的是webpack.base.conf.js這個(gè)文件中的配置，所以不會(huì)把CDN引入的那些依賴(lài)打包進(jìn)去（如果不注釋掉的話(huà)，個(gè)人覺(jué)得應(yīng)該保證CDN引入的版本和npm安裝的版本號(hào)一致，以免生產(chǎn)環(huán)境中出現(xiàn)問(wèn)題不好排錯(cuò)）
2.gzip壓縮
vue-cli生成的項(xiàng)目會(huì)自動(dòng)配好相關(guān)的設(shè)置，只需我們開(kāi)啟就可以了，找到config/index.js文件
productionGzip: true, // 默認(rèn)是false，改為true
如圖：
打開(kāi)build/webpack.prod.conf.js文件，找到如下圖代碼，發(fā)現(xiàn)如果開(kāi)啟gzip壓縮，還需要安裝compression-webpack-plugin
所以我們來(lái)安裝下compression-webpack-plugin，直接安裝可能會(huì)出現(xiàn)版本沖突的報(bào)錯(cuò)，建議安裝低版本的，執(zhí)行如下命令：
npm i -D compression-webpack-plugin@1.11.2
到此，前端的gzip配置就完成了，當(dāng)然還得修改服務(wù)器的配置
3. 打包之后出現(xiàn)一些map文件，不想要怎么辦？
首先介紹下map文件的作用：項(xiàng)目打包后，代碼都是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。
有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。
如果覺(jué)得不需要這些map文件，可以找到config/index.js,進(jìn)行如下修改（看個(gè)人項(xiàng)目需要）
productionSourceMap: false? ? // 默認(rèn)是true
github地址：Avery_G
（注：每一篇文章都會(huì)對(duì)應(yīng)有demo，已上傳到個(gè)人github）
