vue-cli構(gòu)建的項(xiàng)目，npm run dev時(shí)看到的頁(yè)面對(duì)應(yīng)的是npm run build之后dist文件夾中的index.html文件，而不是項(xiàng)目根目錄下的index.html文件。

我第一次使用vue-cli構(gòu)建的項(xiàng)目，在npm run build之后，在本地打開dist文件夾中的index.html文件，頁(yè)面是空白的。而在本地npm run dev是完全沒有問題的。更令我郁悶的是push到github上面時(shí)，dist文件都沒了。

兩個(gè)問題

一番摸索之后，終于找到了問題原因，我們逐一分析這兩個(gè)問題。

忽略文件

對(duì)比github上和本地文件之后，發(fā)現(xiàn)最重要的dist文件沒有被提交到github上，如下圖

dist文件是npm run build執(zhí)行后被編譯打包生成的文件，CSS、JS、圖片等文件都在dist文件中，所以該文件必須要提交到github上。

在項(xiàng)目根目錄下有一個(gè).gitignore文件，文件中設(shè)置一些文件名，對(duì)應(yīng)的文件將不會(huì)被提交到github上面。

在.gitignore文件中，確實(shí)有dist文件名，如下圖

把.gitignore文件中的dist文件名刪除，然后重新push到github上就有了dist文件

路徑問題

解決完上面dist文件的問題之后，打開該文件路徑下的github pages預(yù)覽地址，還是顯示空白頁(yè)，如下圖

我們查看控制臺(tái)，可以看到文件的路徑都出現(xiàn)了問題，如下圖

路徑

這里解釋一下路徑問題中/、./、../的區(qū)別：

• /
  以/開頭的路徑就是絕對(duì)路徑，/是指根目錄，這里的根目錄在本地就是指磁盤，在github上面就是指?jìng)}庫(kù)的根目錄，在網(wǎng)站上就是指服務(wù)器的根目錄
• ./
  以./開頭的路徑是相對(duì)路徑，相對(duì)的是自身文件所在的目錄，如下兩種情況是沒有區(qū)別的

./image/author.png
image/author.png

• ../
../是相對(duì)與自身文件的上級(jí)目錄，屬于相對(duì)路徑

所以上圖中的路徑就出在路徑前面的/，/表示根目錄，我們總不能把static文件移動(dòng)到根目錄，這樣就太傻了。

所以我們要找到配置文件更改下路徑，找到config/index.js文件，如下圖

修改圖中assetsPublicPath的參數(shù)，每次npm run build后的文件路徑將會(huì)按照參數(shù)生成，兩種設(shè)置方法：

assetsPublicPath: './'
或
assetsPublicPath: ''

這樣設(shè)置之后，再次npm run build，重新push到github上面，打開<your name>.github.io/<repositories>/dist/index.html就能看到預(yù)覽頁(yè)了

總結(jié)

每次的踩坑都是不可預(yù)知的，但解決之后是鍛煉人的，也是有些許成就感的。這里總結(jié)一下這次遇到的問題，希望可以幫到其他人。

本文首發(fā)在個(gè)人博客yoowin.me，歡迎訪問！