利用WebPack 打包 Vue 項目，部署在 Github Pages 上遇到的小坑

04-21

最近 vue-cli 生成的 project 想 build 在 github page

上使用。但是直接 build 出來的 dist 目錄部署在 github page 上的時候，卻發現頁面顯示不出來。

查看 dist 文件夾的目錄結構，以及請求的圖片 url ：

發現這是比較常見的問題，因為webpack 默認設置的 public 路徑在網站根目錄 / 上。會導致請求 public 資源的時候去 http://github.io/ 的根目錄下獲取資源，而不是 http://github.io/myPage/ index.html的同目錄下，導致 public 路徑無法找到。

這類問題解決辦法很多，最常用的就是將 webpack 的 config 文件的 prod 方式下的 public 根路徑由 / 改成 ./ 保證編譯出來的 html 在同目錄下讀取 public 里的資源：

這樣做的方法用了很久，一直沒有什麼問題。直到在工程中的 css 下使用了

background-img 屬性，發現打包出來的頁面背景圖無法顯示。

查看網頁調試，發現圖片的請求 404 了。再查看請求目錄，發現本該請求圖片的 /static/img/ 的地址詭異的變成了 /static/css/static/img/:

思考原因：估計是之前的 public 根目錄修改成

./static 的原因。導致編譯時將 css 文件讀取 static 的資源目錄也從 css 文件的當前目錄來加上 /static，從而形成了這個詭異的路徑。

解決辦法：單獨修改 csss 編譯時引用 public 資源的路徑。於是在 css-loader 的設置里使用ExtractTextWebpackPlugin 插件，設置

publicPath 屬性：

問題解決。