問題1

當我們在命令列執行 npm run build 後，專案的目錄下會生成一個 dist 資料夾，它裡面又包含一個 static 資料夾和一個 index.html 檔案，這是 webpack 最終打包好的檔案

我們先嚐試在瀏覽器開啟 index.html

咦，為什麼頁面顯示是空白的？開啟控制檯，細心的朋友可能會發現， script 標籤的引入路徑好像不對啊，因為 static 資料夾和 index.html 是在同一個目錄下的，這裡卻是從根目錄引入 static 下的檔案，正確的路徑應該是 ./ 開頭的相對路徑： src='./static/...' 或者 src='static/...'

是哪裡出了問題？其實這跟配置資源的路徑有關，開啟專案根目錄 config 資料夾下的 index.js ，定位到 build 下的 assetsPublicPath （dev下也有一個assetsPublicPath，別搞錯了，我就是在這裡踩了第一個坑），把

assetsPublicPath: '/' 修改為 assetsPublicPath: './'

這下可找出原因，因為這裡把靜態資源路徑設定為在根目錄下，所以 script 標籤的引入路徑就找不到 static資料夾下的檔案了

重新執行 npm run build ，再開啟 index.html 檔案

OK!在瀏覽器可以看到頁面效果了！

也行你會問，為什麼 assetsPublicPath 的路徑要設定為在根目錄下，這不是在折騰我們嗎？其實這是因為在真正的專案開發中， index.html 和 static 資料夾會被放到伺服器的根目錄下，然後進行線上釋出。

問題2

本地預覽問題解決了，接著我們把專案 push 到 github

這裡又出問題了！ dist 檔案沒有被上傳到 github ，怎麼回事？找到專案根目錄的 .gitignore 檔案，這裡設定一些檔名，對應的檔案將不會被提交到 github 上面，而 dist 被設定在裡面，所以就不能上傳到 github上了，我們可以把 dist 從檔案裡移除。 當然還有另一種辦法，就是在操作 git

dist 意思是強制把 dist 檔案提交到 github 。

好了，現在我們已經可以在 github 倉庫裡看到 dist 資料夾。

疑惑，什麼 dist 資料夾要設定不被提交？ 試想一下，在真正專案開發中， dist 資料夾中的 static 和 index.html 最終是要被扔到伺服器上的，而不是提交到 github 上。

現在還是不能實現專案的線上預覽效果，點選專案的 setting 項，然後找到 Github Pages

選擇 master branch ，儲存，接著你會看到專案線上預覽連結，點選連結

此時，你會看到頁面一片空白，別急，在位址列後面新增 dist （因為 index.html 是在 dist目錄 下），回車，好了，線上頁面效果出來了

至此，專案的線上預覽效果就實現了！！

還沒有結束！在專案的 master 分支上，混合了原始碼和頁面預覽檔案，能不能把兩者分開？而且還有一個問題， index.html 總是在 dist 路徑下的，能不能專案名稱直接跟 index.html 。這裡就引出另外一種辦法了。

另外一種辦法

採用 github 的 gh-pages 分支製作 GitHub Pages ，只把 dist 新增到 gh-pages 分支,這樣就把原始碼和頁面預覽檔案分開了

（先把本地的 dist 資料夾刪除，再上傳到 github ，更新 master 分支）

git 命令操作

?

 這裡要選擇 gh-pages branch ，再點選連線，如果此時看到空白頁面，別急，稍等一會（內容更新需要時間）

好了，現在看倉庫的 master 分支，不存在 dist 檔案夾了，再看線上預覽地址，也完美了