如何在github中在線預覽vue項目

如何在github中在線預覽vue項目？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

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

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

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

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

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

這下可找出原因，因為這里把靜態資源路徑設置為在根目錄下，所以 script 標簽的引入路徑就找不到 static 文件夾下的文件了

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

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

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

問題2

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

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

dist 意思是強制把 dist 文件提交到 github 。

好了，現在我們已經可以在 github 倉庫里看到 dist 文件夾。

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

現在還是不能實現項目的線上預覽效果，點擊項目的 setting 項，然后找到 Github Pages

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

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

至此，項目的在線預覽效果就實現了！！

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

另外一種辦法

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

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

git 命令操作

git run build      
  git branch gh-pages   //創建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分支

這里要選擇 gh-pages branch ，再點擊連接，如果此時看到空白頁面，別急，稍等一會（內容更新需要時間）

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。