vue-cli構(gòu)建的項(xiàng)目，npm run dev時看到的頁面對應(yīng)的是npm run build之后dist文件夾中的index.html文件东亦，而不是項(xiàng)目根目錄下的index.html文件乌叶。
我第一次使用vue-cli構(gòu)建的項(xiàng)目吁系，在npm run build之后，在本地打開dist文件夾中的index.html文件涡扼，頁面是空白的荧止。而在本地npm run dev是完全沒有問題的屹电。更令我郁悶的是push到github上面時，dist文件都沒了跃巡。
兩個問題
一番摸索之后危号，終于找到了問題原因，我們逐一分析這兩個問題素邪。
忽略文件
對比github上和本地文件之后外莲，發(fā)現(xiàn)最重要的dist文件沒有被提交到github上，如下圖
dist文件是npm run build執(zhí)行后被編譯打包生成的文件兔朦，CSS偷线、JS、圖片等文件都在dist文件中沽甥，所以該文件必須要提交到github上声邦。
在項(xiàng)目根目錄下有一個.gitignore文件，文件中設(shè)置一些文件名摆舟，對應(yīng)的文件將不會被提交到github上面亥曹。
在.gitignore文件中，確實(shí)有dist文件名恨诱，如下圖
把.gitignore文件中的dist文件名刪除媳瞪，然后重新push到github上就有了dist文件
路徑問題
解決完上面dist文件的問題之后，打開該文件路徑下的github pages預(yù)覽地址照宝，還是顯示空白頁蛇受，如下圖
我們查看控制臺，可以看到文件的路徑都出現(xiàn)了問題厕鹃，如下圖
路徑
這里解釋一下路徑問題中/兢仰、./、../的區(qū)別：
-
/
以/開頭的路徑就是絕對路徑剂碴，/是指根目錄旨别，這里的根目錄在本地就是指磁盤，在github上面就是指倉庫的根目錄汗茄，在網(wǎng)站上就是指服務(wù)器的根目錄 -
./
以./開頭的路徑是相對路徑，相對的是自身文件所在的目錄铭若，如下兩種情況是沒有區(qū)別的
./image/author.png
image/author.png
-
../
../是相對與自身文件的上級目錄洪碳，屬于相對路徑
所以上圖中的路徑就出在路徑前面的/递览，/表示根目錄，我們總不能把static文件移動到根目錄瞳腌，這樣就太傻了绞铃。
所以我們要找到配置文件更改下路徑，找到config/index.js文件嫂侍，如下圖
修改圖中assetsPublicPath的參數(shù)儿捧，每次npm run build后的文件路徑將會按照參數(shù)生成，兩種設(shè)置方法：
assetsPublicPath: './'
或
assetsPublicPath: ''
這樣設(shè)置之后挑宠，再次npm run build菲盾，重新push到github上面，打開<your name>.github.io/<repositories>/dist/index.html就能看到預(yù)覽頁了
總結(jié)
每次的踩坑都是不可預(yù)知的各淀，但解決之后是鍛煉人的懒鉴，也是有些許成就感的。這里總結(jié)一下這次遇到的問題碎浇，希望可以幫到其他人临谱。
本文首發(fā)在個人博客yoowin.me，歡迎訪問奴璃！
