前言

關(guān)于什么是github pages？怎樣創(chuàng)建github 倉庫上傳本地項目到GitHub遠(yuǎn)程倉庫？等基本操作本文不再贅述，初學(xué)者可以通過搜索找到大量文章教程。本文重點在于：

如何將vue項目源碼（含dist目錄）同步到到github倉庫，同時單獨將項目下的dist目錄同步到gh-pages分支以便使用GitHub pages 發(fā)布和預(yù)覽靜態(tài)網(wǎng)頁。

針對以上問題，作者以往的做法是將Vue項目源碼托管到源碼倉庫，然后另外創(chuàng)建一個webpage倉庫管理dist目錄。然后針對webpage倉庫開啟GitHub pages 功能。實現(xiàn)GitHub pages訪問Vue生成的靜態(tài)頁面

上述操作適用于不想公開源碼倉庫，同時又想免費使用GitHub pages 服務(wù)的情形，通常情況下一些個人的demo項目或是開源項目等倉庫本身就是公開的，使用上述方法同時需要管理兩個倉庫，操作麻煩，最近了解到可以使用git subtree push --prefix dist origin gh-pages指令將項目下dist目錄單獨推送到遠(yuǎn)程倉庫的gh-pages分支然后再將GitHub pages的source切換到gh-pages分支即可使用GitHub pages服務(wù),到master分支管理源碼gh-pages分支部署GitHub pages的目的

前期準(zhǔn)備

• 編譯調(diào)試通過的Vue項目
• 將本地項目推送到Github遠(yuǎn)程倉庫默認(rèn)master分支

步驟1和步驟2這方面的文章和教程不要太多，此處略過

重要說明

關(guān)于Vue項目的publicPath

• 如果你打算發(fā)布到 https://.github.io/，則可以省略這一步，因為 publicPath默認(rèn)即是 “/”。
• 如果你打算發(fā)布到 https://.github.io/<REPO>/（也就是說你的倉庫在 https://github.com/<USERNAME>/<REPO>），則將 publicPath 設(shè)置為 “/<REPO>/”。

<PERO>即你的倉庫名稱

步驟1

執(zhí)行npm run build打包Vue項目，此時項目目錄下會多出一個dist目錄

步驟2

將dist推送到遠(yuǎn)程倉庫（默認(rèn)為master分支）

通常dist目錄會被git忽略，需要將dist從忽略文件中刪除，然后將dist目錄推送到遠(yuǎn)程倉庫?

步驟3

?? 使用git subtree push --prefix dist origin gh-pages將dist目錄推送到遠(yuǎn)程的gh-pages分支，若遠(yuǎn)程沒有gh-pagse分支則會新建gh-pagse分支然后再推送。

備注：此處只能是gh-pages分支，才能使用GitHub pages功能

步驟4

登錄遠(yuǎn)程GitHub倉庫，通過setting -> github pages -> source 將gh-pages設(shè)置為GitHub pages 的source

步驟5

訪問GitHub pages 鏈接

步驟6

每次執(zhí)行npm run build 后再次執(zhí)行步驟2，步驟3

到此這篇關(guān)于Vue項目打包部署到GitHub Pages的實現(xiàn)步驟的文章就介紹到這了,更多相關(guān)Vue打包部署到GitHub Pages內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論