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
  

打包在繼續，歡迎指正