最近在用vue開發(fā)項(xiàng)目，開發(fā)完成后想要打包測試干跛，這時候問題就來啦，總結(jié)幾個問題如下
1锈锤、如何打包
2驯鳖、打包完成后頁面報(bào)路徑錯誤
3、百度后都是vue-cli2.0的解決方法
4久免、打包assets大小上限了
5、直接打開本地dist/index.html文件找不到
接下來就上面所提到的問題進(jìn)行一一解決
解決問題1
首先扭弧，要用webpack打包肯定是要先安裝啦
npm install webpack -g(全局安裝webpack)
然后阎姥，cd到你的項(xiàng)目文件，運(yùn)行打包代碼
npm run build
這樣鸽捻，你的項(xiàng)目就打包完成了呼巴，是不是很簡單！
別急御蒲，現(xiàn)在才是剛?cè)肟?/em>
解決問題2
當(dāng)你做完上面的操作后衣赶，興致勃勃的找到項(xiàng)目文件下的dist文件夾，雙擊打開index.html,你會驚喜的發(fā)現(xiàn)-->一片空白
index.html報(bào)錯
是的厚满，你沒看錯府瞄，報(bào)錯了，是路徑引用錯誤碘箍。怎么辦遵馆？不會呀鲸郊！百度唄
解決問題3
好的，現(xiàn)在我們來到第三步了货邓，我們小心翼翼的復(fù)制了控制臺的報(bào)錯信息秆撮，粘貼到百度上，一搜换况，果然职辨，還是很多人跟我一樣遇到這種問題的嘛
志同道合的人們
當(dāng)你開開心心的點(diǎn)開進(jìn)去，你會看到
看了幾個戈二，也都是這么說的舒裤，那可以，來試試挽拂，alt+tab熟練的切換回來惭每，查找傳說中的webpack.prod.conf.js文件，橋多麻跌亏栈，我好像台腥，沒有這個文件鴨~難道？沒錯绒北，vue-cli3已經(jīng)沒有這個文件了黎侈，已經(jīng)被整合了，現(xiàn)在只有一個闷游，那怎么辦呢峻汉？別急，再找一下脐往，果然休吠，功夫不負(fù)有心人，果然找到了解決辦法业簿，我們只需在根目錄上創(chuàng)建一個vue.config.js文件瘤礁，把下面這段代碼復(fù)制進(jìn)去就行了
module.exports = {
// 基本路徑
publicPath: './',
// 輸出文件目錄
outputDir: 'dist',
// webpack-dev-server 相關(guān)配置
devServer: {
port: 8888,
}
}
順便提一下，再次運(yùn)行npm run build之前梅尤，如果有同時在使用同一個文件的柜思，一定要關(guān)掉，不然會阻止進(jìn)程導(dǎo)致報(bào)錯
解決問題4
在運(yùn)行上面代碼打包過程中巷燥，如果你assets里面有大文件或者圖片（一般都會有的赡盘，因?yàn)樗拗瞥跏即笮?44k），就會報(bào)錯缰揪，打包失敗
這時候咋辦捏陨享？回到剛剛創(chuàng)建的js文件里，在module.exports 里面，丟多一段代碼進(jìn)去
//webpack配置
configureWebpack: {
//警告 webpack 的性能提示
performance: {
hints:'warning',
//入口起點(diǎn)的最大體積
maxEntrypointSize: 5000000000,
//生成文件的最大體積
maxAssetSize: 3000000000,
//只給出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
順帶一下官網(wǎng)performance地址https://www.webpackjs.com/configuration/performance/
這時再打包就沒問題了
解決問題5
這時我們再興致勃勃的去打開index文件霉咨，竟然直接出現(xiàn)這個蛙紫？
難道我們代碼一直都搞錯了？
沒錯途戒，是搞錯了坑傅，但不是代碼搞錯了，是方式搞錯了
index頁面不能直接打開喷斋，需要在服務(wù)器上打開
這時我們需要安裝serve
npm install serve -g(全局安裝serve)
安裝完成后直接用打開dist文件夾唁毒，復(fù)制給出的地址即可查看你的項(xiàng)目了（順提一下，復(fù)制控制臺文字的快捷方式星爪，先右鍵浆西，點(diǎn)擊標(biāo)記，選中要復(fù)制的內(nèi)容顽腾，直接enter就行了）
serve -s dist
官方解釋
這時候近零，我們就跑完打包的全部流程啦~
補(bǔ)充：后期打包時，可能會遇到eslint報(bào)錯抄肖，可參考這篇文章久信，我用的方法二，可以解決eslint報(bào)錯的問題
文章地址：https://blog.csdn.net/daqiang012/article/details/91419230
