之前在嘗試部署vuepress專案時，出現了樣式丟失，圖片載入失敗的問題。具體情況請繼續往下看：

本地測試 —— 完全正常

在本地測試時的樣式都是正常顯示的：

GitHub部署 —— 樣式丟失

打包部署到GitHub上時，佈局和樣式就完全亂了：

同時還有一堆報錯 —— 基本都是資源載入失敗：

思考一下，我們最終部署到GitHub上的專案檔案是本地打包好的dist檔案，推測可能是本地打包出問題了。再來看看dist/index.html檔案：

本地打包dist檔案 —— 樣式丟失

果然本地打包出的專案檔案就有問題，樣式同樣丟失了：

解決方案

資源載入失敗，基本都是路徑出了問題。檢視dist/index.html

這裡的根目錄 / 路徑是我們之前在/docs/.vuepress/config.js中配置的base欄位：

這裡的資源路徑不應該是絕對路徑 —— 根目錄 / ，而應該是相對路徑 ./ ，從我們打包出來的檔案路徑查詢。

因為我們最終上傳部署的是構建打包出來的檔案，所以你這裡的資源載入路徑寫絕對路徑（本地根目錄 / ）肯定是找不到的呀。應該是以構建打包出的檔案為主，直接使用相對路徑即可。

修改base欄位為 ./ 後，重新打包上傳部署，可以看到就顯示正常啦~

本地測試時常使用絕對路徑，但是部署時都應該使用相對路徑。這也算是一個小的經驗吧！