Vue項目怎么打包部署到GitHub?Pages中

發(fā)布時間：2022-04-19 10:20:13 來源：億速云閱讀：342 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“Vue項目怎么打包部署到GitHub Pages中”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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

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

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

<PERO>即你的倉庫名稱

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

Vue項目怎么打包部署到GitHub?Pages中

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

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

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

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

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

Vue項目怎么打包部署到GitHub?Pages中

訪問GitHub pages 鏈接

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

“Vue項目怎么打包部署到GitHub Pages中”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細節(jié)

猜你喜歡