npm run build 打包爬坑記
阿新 • • 發佈:2019-02-07
npm run build 打包爬坑記
先說說打包過程,npm run build 後放入phpstudy裡面,訪問本地ip,檢視phpstudy的埠號,就能訪問頁面了(訪問地址:http://192.168.1.188/dist/)
然後爬坑之路開始了(我的打包是一個dist資料夾,直接放入phpStudy的www裡面),如下圖1
1.
- 報錯:打包之後訪問頁面一片空白,各種檔案載入不出來,檔案報404,路徑是("/static/img/…")
- 原因:img檔案是在static下的img資料夾中,很明顯是路徑錯誤,應該是("./static/img/…")
- 解決方法:查詢config資料夾中的index.js檔案,將( assetsPublicPath: ’ / ',)更改如下圖2:
- 報錯:路徑改完後,直接跳轉到我匹配的404頁面了,像是匹配不到home頁面
- 原因:打包後直接把dist資料夾拷過來,我們寫的router路徑是沒有(dist)這個資料夾的
- 解決方法:
⑴直接把程式碼拷貝出來,不要dist資料夾
⑵在router中加入base:"/dist":如下圖3
-
原因:小圖片打包就是base64的,大圖片路徑是基於src的(明顯顯示出來的路徑錯誤);我的圖片是這樣顯示的,如圖4(build資料夾中webpack.base.conf.js 檔案,設定了檔案的路徑),圖5,
-
解決方法:
⑴直接把圖片放入static資料夾,更改圖片路徑(“./static/img/…”)
⑵如果圖片還在src下的某個資料夾,則找到build資料夾中的utils檔案,加入程式碼(publicPath: ‘…/…/’,),如下圖6
- 報錯:打包後,手機頁面展示沒問題,但非首頁重新整理一下,報404
- 原因:單頁面只有一個index.html
- 報錯:打包時間太長,vendor.js 3.24M,哇咔咔
- 原因:一次性載入所有檔案
- 解決方法: 官網給出懶載入,超級好用666 路由懶載入,戳這裡; 解決後的前後對比圖,如圖7、8