這篇文章主要介紹vue項(xiàng)目打包后如何上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),蓬萊企業(yè)網(wǎng)站建設(shè),蓬萊品牌網(wǎng)站建設(shè),網(wǎng)站定制,蓬萊網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,蓬萊網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

vue項(xiàng)目打包后上傳至GitHub，并實(shí)現(xiàn)github-pages的預(yù)覽

1. 打包vue 項(xiàng)目

vue項(xiàng)目：

命令行輸入打包命令npm run build，生成了dist文件夾：

打包完成。

打包常見問題1——項(xiàng)目資源無(wú)法加載

打開剛剛打包好的dist文件夾，瀏覽器打開index.html

發(fā)現(xiàn)該頁(yè)面是空白的，打開控制臺(tái)發(fā)現(xiàn)

這里看到index.html文件中沒有加載任何css、js文件。

解決方法——修改config文件

打開項(xiàng)目根目錄config下的index.js文件，進(jìn)行如下修改：

即將assetsPublicPath: '/'改成assetsPublicPath: './'

重新npm run build

打包常見問題2——字體圖標(biāo)無(wú)法加載

字體和圖標(biāo)不能正常顯示

解決方法——修改build文件

打開根目錄下build中的utils.js文件，在控制build樣式文件代碼中添加　publicPath: '../../'，

添加publicPath: '../../'

重新npm run build

2. 上傳vue 項(xiàng)目并預(yù)覽

1. 將項(xiàng)目提交至倉(cāng)庫(kù)(包括dist目錄)，假如倉(cāng)庫(kù)名稱為test.

2. $ git subtree push --prefix dist origin gh-pages，將dist目錄提交至gh-pages。

3. 在地址欄輸入https://你的github名稱.github.io/test/即可預(yù)覽。

其他問題

1. 用mock模擬數(shù)據(jù)，無(wú)法使用。解決方案：創(chuàng)建一個(gè).json文件把數(shù)據(jù)寫死，然后引用這個(gè)文件。

2. 對(duì)于使用Vue-cli3.0構(gòu)建的項(xiàng)目出現(xiàn)的樣式失效問題，解決方案：在vue.config.js中設(shè)置baseUrl: '/staff/'。

以上是“vue項(xiàng)目打包后如何上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：vue項(xiàng)目打包后如何上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽
文章路徑：http://aaarwkj.com/article2/gihhoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、做網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)