欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟

 更新時(shí)間：2022年04月18日 16:18:18   作者：mingyong.g  
本文主要介紹了Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

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

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

前期準(zhǔn)備

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

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

重要說(shuō)明

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

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

<PERO>即你的倉(cāng)庫(kù)名稱

步驟1

執(zhí)行npm run build打包Vue項(xiàng)目，此時(shí)項(xiàng)目目錄下會(huì)多出一個(gè)dist目錄

在這里插入圖片描述

步驟2

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

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

步驟3

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

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

步驟4

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

在這里插入圖片描述

步驟5

訪問(wèn)GitHub pages 鏈接

步驟6

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

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

相關(guān)文章

最新評(píng)論