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

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

問題1

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

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

咦，為什么頁面顯示是空白的？打開控制臺，細心的朋友可能會發(fā)現(xiàn)， script 標簽的引入路徑好像不對啊，因為 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 標簽的引入路徑就找不到 static 文件夾下的文件了

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

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

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

問題2

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

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

dist 意思是強制把 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)了?。?/p>

還沒有結(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     //強制把dist文件夾提交到github
  $ git subtree push --prefix dist origin gh-pages  //把dist文件夾單獨部署到gh-pages分支

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

總結(jié)

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

最新評論