前言

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

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

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

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

前期準備

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

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

重要說明

關于Vue項目的publicPath

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

<PERO>即你的倉庫名稱

步驟1

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

步驟2

將dist推送到遠程倉庫（默認為master分支）

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

步驟3

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

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

步驟4

登錄遠程GitHub倉庫，通過setting -> github pages -> source 將gh-pages設置為GitHub pages 的source

步驟5

訪問GitHub pages 鏈接

步驟6

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

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

最新評論