寫在前面：
npm run build 是vue-cli用來(lái)打包項(xiàng)目的命令行，這里記錄了我關(guān)于vue-cli打包的一些常見(jiàn)的坑，詳細(xì)的記錄我所踩過(guò)的坑和解決方法。
第一個(gè)坑：文件引用路徑
命令行：
//直接打包
npm run build
但是打包完成后，打開(kāi)dist/index.htmnl文件整個(gè)網(wǎng)頁(yè)都是一片空白的。
打開(kāi)調(diào)試，發(fā)現(xiàn)有一排報(bào)錯(cuò)說(shuō)是：不能加載到資源，后面就發(fā)現(xiàn)路徑的問(wèn)題，仔細(xì)看上面再看上面加載的css的引用路徑，這里是有問(wèn)題的。
爬坑：
文件位置：config文件夾/index.js文件
更改assetsPublicPath屬性：
文件里面有兩個(gè)assetsPublicPath屬性，也就是更改build里面的assetsPublicPath屬性：
assetsPublicPath:'/'//false
assetsPublicPath:'./'//true
assetsPublicPath屬性作用是指定編譯發(fā)布的根目錄，‘/‘指的是項(xiàng)目的根目錄 ，’./‘指的是當(dāng)前目錄。
改好設(shè)置后重新打包，你就會(huì)得到你想要的頁(yè)面
錯(cuò)誤原因
打包出來(lái)所有的文件都會(huì)放在dist的static文件夾下面，index.html要加載文件，那么問(wèn)題來(lái)了，’/‘指的是項(xiàng)目的根目錄 ，’./‘指的是當(dāng)前目錄。要選哪個(gè)？當(dāng)然選擇原諒她了。
第二個(gè)坑：路由history模式。
這個(gè)坑是當(dāng)你使用了路由之后，在沒(méi)有后端配合的情況下就手賤打開(kāi)路由history模式的時(shí)候，打包出來(lái)的文件也會(huì)是一片空白的情況，當(dāng)時(shí)踩這個(gè)坑的時(shí)候花了很多時(shí)間，網(wǎng)上的教程基本上都是說(shuō)的第一個(gè)坑，這個(gè)坑很少有人提起。
打包之前的樣子：
這里我弄了個(gè)示例，因?yàn)槭莿倓?chuàng)建的項(xiàng)目沒(méi)有其他因素干擾，當(dāng)你打開(kāi)路由的history模式之后，開(kāi)發(fā)的時(shí)候一切正常
打包之后的樣子：
解決方式：
// mode: 'history',//將這個(gè)模式關(guān)閉就好
這里并不是說(shuō)不能打開(kāi)這個(gè)模式，這個(gè)模式需要后端設(shè)置的配合，詳情可以看：路由文檔
Gzip 文件壓縮
順帶分享一個(gè)很6的優(yōu)化打包的方法，用起來(lái)也簡(jiǎn)單的很，只要下載一個(gè)插件，然后打開(kāi)一個(gè)設(shè)置就好了。
設(shè)置方法：
這里其實(shí)是webpack自帶的一個(gè)優(yōu)化打包的方法，打開(kāi)這個(gè)配置后如果沒(méi)有下載那個(gè)插件，會(huì)提示你下載，下載就好了。
然后在打包的時(shí)候，每個(gè)js和css文件會(huì)壓縮一個(gè)gz后綴的文件夾，瀏覽器如果支持g-zip 會(huì)自動(dòng)查找有沒(méi)有g(shù)z文件 找到了就加載gz然后本地解壓 執(zhí)行。
打開(kāi)這個(gè)配置會(huì)之后對(duì)整體的打包體積也就是dist文件夾并沒(méi)有太大的變化。下圖來(lái)看看他的壓縮率以及對(duì)加載的提升，可以說(shuō)是非常大且明顯的，大家可以自己試一下就知道多好用了。
Vue打包后出現(xiàn)一些map文件的解決方法
問(wèn)題：
可能很多人在做vue項(xiàng)目打包，打包之后js中，會(huì)自動(dòng)生成一些map文件，怎么把它去掉不要呢？ 運(yùn)行 cnpm run build 開(kāi)始打包后會(huì)在項(xiàng)目目錄下自動(dòng)創(chuàng)建dist目錄，打包好的文件都在其中 。
解決方法：
productionSourceMap:false //把這個(gè)改為false。
找到
不然在最終打包的文件中會(huì)出現(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ò)。
最后你在build之后，然后就會(huì)發(fā)現(xiàn)就沒(méi)有自動(dòng)生成一些map文件了。。。
