github預覽問題

每次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上面，開啟.github.io//dist/index.html就能看到預覽頁了,這還是有問題預覽的時候網域名稱特別長，那麼如何讓.github.io/就可以訪問呢，我們下篇分解。