如何在github中在線預(yù)覽vue項(xiàng)目

如何在github中在線預(yù)覽vue項(xiàng)目？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

當(dāng)我們?cè)诿钚袌?zhí)行 npm run build 后，項(xiàng)目的目錄下會(huì)生成一個(gè) dist 文件夾，它里面又包含一個(gè) static 文件夾和一個(gè) index.html 文件，這是 webpack 最終打包好的文件

我們先嘗試在瀏覽器打開(kāi) index.html

咦，為什么頁(yè)面顯示是空白的？打開(kāi)控制臺(tái)，細(xì)心的朋友可能會(huì)發(fā)現(xiàn)， script 標(biāo)簽的引入路徑好像不對(duì)啊，因?yàn)?static 文件夾和 index.html 是在同一個(gè)目錄下的，這里卻是從根目錄引入 static 下的文件，正確的路徑應(yīng)該是 ./ 開(kāi)頭的相對(duì)路徑： src='./static/...' 或者 src='static/...'

是哪里出了問(wèn)題？其實(shí)這跟配置資源的路徑有關(guān)，打開(kāi)項(xiàng)目根目錄 config 文件夾下的 index.js ，定位到 build 下的 assetsPublicPath （dev下也有一個(gè)assetsPublicPath，別搞錯(cuò)了，我就是在這里踩了第一個(gè)坑），把

assetsPublicPath: '/' 修改為 assetsPublicPath: './'

這下可找出原因，因?yàn)檫@里把靜態(tài)資源路徑設(shè)置為在根目錄下，所以 script 標(biāo)簽的引入路徑就找不到 static 文件夾下的文件了

重新執(zhí)行 npm run build ，再打開(kāi) index.html 文件

OK!在瀏覽器可以看到頁(yè)面效果了！

也行你會(huì)問(wèn)，為什么 assetsPublicPath 的路徑要設(shè)置為在根目錄下，這不是在折騰我們嗎？其實(shí)這是因?yàn)樵谡嬲捻?xiàng)目開(kāi)發(fā)中， index.html 和 static 文件夾會(huì)被放到服務(wù)器的根目錄下，然后進(jìn)行線上發(fā)布。

問(wèn)題2

本地預(yù)覽問(wèn)題解決了，接著我們把項(xiàng)目 push 到 github

這里又出問(wèn)題了！ dist 文件沒(méi)有被上傳到 github ，怎么回事？找到項(xiàng)目根目錄的 .gitignore 文件，這里設(shè)置一些文件名，對(duì)應(yīng)的文件將不會(huì)被提交到 github 上面，而 dist 被設(shè)置在里面，所以就不能上傳到 github 上了，我們可以把 dist 從文件里移除。 當(dāng)然還有另一種辦法，就是在操作 git 命令時(shí)，把 git add. 改為 git add -f

dist 意思是強(qiáng)制把 dist 文件提交到 github 。

好了，現(xiàn)在我們已經(jīng)可以在 github 倉(cāng)庫(kù)里看到 dist 文件夾。

疑惑，什么 dist 文件夾要設(shè)置不被提交？ 試想一下，在真正項(xiàng)目開(kāi)發(fā)中， dist 文件夾中的 static 和 index.html 最終是要被扔到服務(wù)器上的，而不是提交到 github 上。

現(xiàn)在還是不能實(shí)現(xiàn)項(xiàng)目的線上預(yù)覽效果，點(diǎn)擊項(xiàng)目的 setting 項(xiàng)，然后找到 Github Pages

選擇 master branch ，保存，接著你會(huì)看到項(xiàng)目在線預(yù)覽鏈接，點(diǎn)擊鏈接

此時(shí)，你會(huì)看到頁(yè)面一片空白，別急，在地址欄后面添加 dist （因?yàn)?index.html 是在 dist目錄 下），回車(chē)，好了，線上頁(yè)面效果出來(lái)了

至此，項(xiàng)目的在線預(yù)覽效果就實(shí)現(xiàn)了?。?/p>

還沒(méi)有結(jié)束！在項(xiàng)目的 master 分支上，混合了源代碼和頁(yè)面預(yù)覽文件，能不能把兩者分開(kāi)？而且還有一個(gè)問(wèn)題， index.html 總是在 dist 路徑下的，能不能項(xiàng)目名稱(chēng)直接跟 index.html 。這里就引出另外一種辦法了。

另外一種辦法

采用 github 的 gh-pages 分支制作 GitHub Pages ，只把 dist 添加到 gh-pages 分支,這樣就把源代碼和頁(yè)面預(yù)覽文件分開(kāi)了

（先把本地的 dist 文件夾刪除，再上傳到 github ，更新 master 分支）

git 命令操作

git run build      
  git branch gh-pages   //創(chuàng)建gh-pages分支
  git checkout gh-pages  //切換到gh-pages分支
  git add -f dist     //強(qiáng)制把dist文件夾提交到github
  $ git subtree push --prefix dist origin gh-pages  //把dist文件夾單獨(dú)部署到gh-pages分支

這里要選擇 gh-pages branch ，再點(diǎn)擊連接，如果此時(shí)看到空白頁(yè)面，別急，稍等一會(huì)（內(nèi)容更新需要時(shí)間）

好了，現(xiàn)在看倉(cāng)庫(kù)的 master 分支，不存在 dist 文件夾了，再看線上預(yù)覽地址，也完美了

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。