vue-cli構建的項目在github上的預覽問題

前兩天寫了一篇關於vuex2.0的小米便籤項目實例，有網友建議增長在線預覽的效果，而後在github上增長可預覽項目時遇到並解決一些問題，在這給你們作個分享。

個人小米便籤項目是用vue-cli腳手架構建的，在執行npm run build命令以後會對項目進行編譯打包，並在項目中生產dist文件夾，壓縮後的文件都在dist文件夾中。

然而，在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預覽地址，在進行預覽的時候又發現一個問題 路徑問題。

查看控制檯，能夠看到文件的路徑都出現了問題，以下圖:

發現文件的路徑都是/根路徑,咱們總不能把static文件移動到根目路徑下吧，那樣就太low了。

因此咱們要找到配置文件更改下路徑，找到config/index.js文件，以下圖：

修改圖中assetsPublicPath的參數：assetsPublicPath: './'或者assetsPublicPath: ''，修改後，每次執行npm run build後文件路徑將會按照參數生成。

這樣設置以後，再次npm run build，從新push到github上面，打開<yourname>.github.io/<repositories name>/dist/index.html就能看到預覽頁了，個人小米便籤預覽地址。

總結

這就是我在增長可預覽地址時遇到的一些問題，在這分享出來，但願能幫助到須要幫助的人。

來都來了點一下贊吧，你的贊是對我最大的鼓勵^_^