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

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

問題1

當(dāng)我們在命令行執(zhí)行 npm run build 后，項目的目錄下會生成一個 dist 文件夾，它里面又包含一個 static 文件夾和一個 index.html 文件，這是 webpack 最終打包好的文件

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

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

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

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

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

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

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

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

問題2

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

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

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

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

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

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

選擇 master branch ，保存，接著你會看到項目在線預(yù)覽鏈接，點擊鏈接

此時，你會看到頁面一片空白，別急，在地址欄后面添加 dist （因為 index.html 是在 dist目錄 下），回車，好了，線上頁面效果出來了

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

還沒有結(jié)束！在項目的 master 分支上，混合了源代碼和頁面預(yù)覽文件，能不能把兩者分開？而且還有一個問題， index.html 總是在 dist 路徑下的，能不能項目名稱直接跟 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àn)github在線預(yù)覽功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論