如何在github中在線預(yù)覽vue項(xiàng)目？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
在景德鎮(zhèn)等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需求定制設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),網(wǎng)絡(luò)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),景德鎮(zhèn)網(wǎng)站建設(shè)費(fèi)用合理。當(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分支
這里要選擇 gh-pages branch ，再點(diǎn)擊連接，如果此時(shí)看到空白頁面，別急，稍等一會(huì)（內(nèi)容更新需要時(shí)間）
好了，現(xiàn)在看倉庫的 master 分支，不存在 dist 文件夾了，再看線上預(yù)覽地址，也完美了
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
