本文首發於yoowin.me，歡迎訪問！
vue-cli構建的專案，npm run dev時看到的頁面對應的是npm run build之後dist資料夾中的index.html檔案，而不是專案根目錄下的index.html檔案。
我第一次使用vue-cli構建的專案，在npm run build之後，在本地開啟dist資料夾中的index.html檔案，頁面是空白的。而在本地npm run dev是完全沒有問題的。更令我鬱悶的是push到github上面時，dist檔案都沒了。
兩個問題
一番摸索之後，終於找到了問題原因，我們逐一分析這兩個問題。
忽略檔案
對比github上和本地檔案之後，發現最重要的dist檔案沒有被提交到github上，如下圖
dist檔案是npm run build執行後被編譯打包生成的檔案，CSS、JS、圖片等檔案都在dist檔案中，所以該檔案必須要提交到github上。
在專案根目錄下有一個.gitignore檔案，檔案中設定一些檔名，對應的檔案將不會被提交到github上面。
在.gitignore檔案中，確實有dist檔名，如下圖
把.gitignore檔案中的dist檔名刪除，然後重新push到github上就有了dist檔案
路徑問題
解決完上面dist檔案的問題之後，開啟該檔案路徑下的github pages預覽地址，還是顯示空白頁，如下圖
我們檢視控制檯，可以看到檔案的路徑都出現了問題，如下圖
路徑
這裡解釋一下路徑問題中/、./、../的區別：
/
以/開頭的路徑就是絕對路徑，/是指根目錄，這裡的根目錄在本地就是指磁碟，在github上面就是指倉庫的根目錄，在網站上就是指伺服器的根目錄./
以./開頭的路徑是相對路徑，相對的是自身檔案所在的目錄，如下兩種情況是沒有區別的./image/author.png image/author.png複製程式碼../../是相對與自身檔案的上級目錄，屬於相對路徑
所以上圖中的路徑就出在路徑前面的/，/表示根目錄，我們總不能把static檔案移動到根目錄，這樣就太傻了。
所以我們要找到配置檔案更改下路徑，找到config/index.js檔案，如下圖
修改圖中assetsPublicPath的引數，每次npm run build後的檔案路徑將會按照引數生成，兩種設定方法：
assetsPublicPath: './'
或
assetsPublicPath: ''
這樣設定之後，再次npm run build，重新push到github上面，開啟<your name>.github.io/<repositories>/dist/index.html就能看到預覽頁了
總結
每次的踩坑都是不可預知的，但解決之後是鍛鍊人的，也是有些許成就感的。這裡總結一下這次遇到的問題，希望可以幫到其他人。