最近在使用 vue-cli 腳手架工具構(gòu)建自己的第一個(gè) vue 項(xiàng)目，有點(diǎn)小激動(dòng)，想把它上傳到 github 并展示一下預(yù)覽效果，結(jié)果踩了好多坑，折騰了大半天才弄好。

這里假設(shè)你也是和我一樣使用了 vue-cli 搭建了自己的項(xiàng)目，并且項(xiàng)目也已經(jīng)上傳到了 github

問題1

當(dāng)我們?cè)诿钚袌?zhí)行 npm run build 后，項(xiàng)目的目錄下會(huì)生成一個(gè) dist 文件夾，它里面又包含一個(gè) static 文件夾和一個(gè) index.html 文件，這是 webpack 最終打包好的文件

我們先嘗試在瀏覽器打開 index.html

咦，為什么頁面顯示是空白的？打開控制臺(tái)，細(xì)心的朋友可能會(huì)發(fā)現(xiàn)， script 標(biāo)簽的引入路徑好像不對(duì)啊，因?yàn)?static 文件夾和 index.html 是在同一個(gè)目錄下的，這里卻是從根目錄引入 static 下的文件，正確的路徑應(yīng)該是 ./ 開頭的相對(duì)路徑： src='./static/...' 或者 src='static/...'

是哪里出了問題？其實(shí)這跟配置資源的路徑有關(guān)，打開項(xiàng)目根目錄 config 文件夾下的 index.js ，定位到 build 下的 assetsPublicPath （dev下也有一個(gè)assetsPublicPath，別搞錯(cuò)了，我就是在這里踩了第一個(gè)坑），把

assetsPublicPath: '/' 修改為 assetsPublicPath: './'

這下可找出原因，因?yàn)檫@里把靜態(tài)資源路徑設(shè)置為在根目錄下，所以 script 標(biāo)簽的引入路徑就找不到 static 文件夾下的文件了

重新執(zhí)行 npm run build ，再打開 index.html 文件

OK!在瀏覽器可以看到頁面效果了！

也行你會(huì)問，為什么 assetsPublicPath 的路徑要設(shè)置為在根目錄下，這不是在折騰我們嗎？其實(shí)這是因?yàn)樵谡嬲捻?xiàng)目開發(fā)中， index.html 和 static 文件夾會(huì)被放到服務(wù)器的根目錄下，然后進(jìn)行線上發(fā)布。

問題2

本地預(yù)覽問題解決了，接著我們把項(xiàng)目 push 到 github

這里又出問題了！ dist 文件沒有被上傳到 github ，怎么回事？找到項(xiàng)目根目錄的 .gitignore 文件，這里設(shè)置一些文件名，對(duì)應(yīng)的文件將不會(huì)被提交到 github 上面，而 dist 被設(shè)置在里面，所以就不能上傳到 github 上了，我們可以把 dist 從文件里移除。 當(dāng)然還有另一種辦法，就是在操作 git 命令時(shí)，把 git add. 改為 git add -f

dist 意思是強(qiáng)制把 dist 文件提交到 github 。

好了，現(xiàn)在我們已經(jīng)可以在 github 倉庫里看到 dist 文件夾。

疑惑，什么 dist 文件夾要設(shè)置不被提交？ 試想一下，在真正項(xiàng)目開發(fā)中， dist 文件夾中的 static 和 index.html 最終是要被扔到服務(wù)器上的，而不是提交到 github 上。

現(xiàn)在還是不能實(shí)現(xiàn)項(xiàng)目的線上預(yù)覽效果，點(diǎn)擊項(xiàng)目的 setting 項(xiàng)，然后找到 Github Pages

選擇 master branch ，保存，接著你會(huì)看到項(xiàng)目在線預(yù)覽鏈接，點(diǎn)擊鏈接

此時(shí)，你會(huì)看到頁面一片空白，別急，在地址欄后面添加 dist （因?yàn)?index.html 是在 dist目錄 下），回車，好了，線上頁面效果出來了

至此，項(xiàng)目的在線預(yù)覽效果就實(shí)現(xiàn)了！！

還沒有結(jié)束！在項(xiàng)目的 master 分支上，混合了源代碼和頁面預(yù)覽文件，能不能把兩者分開？而且還有一個(gè)問題， index.html 總是在 dist 路徑下的，能不能項(xiàng)目名稱直接跟 index.html 。這里就引出另外一種辦法了。

另外一種辦法

采用 github 的 gh-pages 分支制作 GitHub Pages ，只把 dist 添加到 gh-pages 分支,這樣就把源代碼和頁面預(yù)覽文件分開了

（先把本地的 dist 文件夾刪除，再上傳到 github ，更新 master 分支）

git 命令操作

git run build      
  git branch gh-pages   //創(chuàng)建gh-pages分支
  git checkout gh-pages  //切換到gh-pages分支
  git add -f dist     //強(qiáng)制把dist文件夾提交到github
  $ git subtree push --prefix dist origin gh-pages  //把dist文件夾單獨(dú)部署到gh-pages分支

好了，現(xiàn)在看倉庫的 master 分支，不存在 dist 文件夾了，再看線上預(yù)覽地址，也完美了

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論