簡(jiǎn)潔版：上傳所有代碼 << 構(gòu)建項(xiàng)目并上傳 dist 目錄 << 設(shè)置倉(cāng)庫(kù) << 訪問(wèn)
Step1：在 GitHub 上新建倉(cāng)庫(kù)，并將 Vue 項(xiàng)目的代碼 push 到該倉(cāng)庫(kù)中。坑點(diǎn)在于，如果你是從 GitHub 上 clone 的別人的項(xiàng)目，那么在使用 git 時(shí)，需要修改 origin 的 URL 地址為你自己倉(cāng)庫(kù)的地址，代碼如下。
git remote set-url origin git@github.com:<你自己倉(cāng)庫(kù)的SSH地址>
我就差點(diǎn)提交到別人的倉(cāng)庫(kù)去了 TT
Step2：如果此前你從來(lái)沒(méi)有對(duì)項(xiàng)目進(jìn)行 build（構(gòu)建）的話，那么是不會(huì)有這個(gè) dist 目錄的（如下）而要想使用 GitHub Pages 功能在線展示項(xiàng)目網(wǎng)頁(yè)，這個(gè) dist 目錄又是必不可少的。
因此，我們需要 build 項(xiàng)目，并將生成的 dist 目錄上傳到 GitHub 倉(cāng)庫(kù)中。
Step3：在使用 npm run build 時(shí)可能報(bào)錯(cuò) “npm ERR! missing script: build”，這是因?yàn)槟愕捻?xiàng)目沒(méi)有定義名為 “build” 的腳本。因此，到項(xiàng)目中的 package.json 文件中查看現(xiàn)有的腳本：
比如，我的項(xiàng)目中定義的 build 腳本如上，那么我應(yīng)該輸入命令：
npm run build:prod我隨便選的，因?yàn)榈谝粋€(gè)看起來(lái)更正常。
Step4：build 完畢后，我們將得到 Step2 中展示的 dist 目錄，里面裝有一個(gè) HTML 頁(yè)面和一些靜態(tài)資源。
如果你點(diǎn)開 index.html，發(fā)現(xiàn)是一片空白，那么可能需要修改項(xiàng)目中的 vue.config.js 文件，如下圖所示。
我這里原本是 publicPath: "/"，少了一個(gè)點(diǎn)，修改后再打包，最終 HTML 顯示成功。如果你沒(méi)有這一行，那么可能需要添加上去（我刷到過(guò)其他博客是這樣解決的）
Step5：如果 index.html 顯示成功了，那么我們就可以把 dist 目錄上傳到倉(cāng)庫(kù)中了。
在跳轉(zhuǎn)后的頁(yè)面，把 dist 目錄拖拽進(jìn)去，最后 commit 即可。
為什么要手動(dòng)上傳？因?yàn)?git 不會(huì) push 打包文件，所以要單獨(dú)上傳 dist 文件。
Step6：最后一步，如下圖紅框所示設(shè)置倉(cāng)庫(kù)。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-833522.html
最后一個(gè)坑點(diǎn)。你直接點(diǎn)擊 “Visit site” 訪問(wèn)的頁(yè)面是你的 README.md，而不是你的項(xiàng)目主頁(yè)。需要在上圖 URL 地址的最后加上 “dist”，才能訪問(wèn)到項(xiàng)目主頁(yè)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-833522.html
到了這里，關(guān)于GitHub | 在 GitHub 上在線展示 Vue 項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
