這篇文章主要介紹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ò)營銷,網(wǎng)絡(luò)優(yōu)化,蓬萊網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(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)目資源無法加載

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

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

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

解決方法——修改config文件

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

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

重新npm run build

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

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

解決方法——修改build文件

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

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

重新npm run build

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

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

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

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

其他問題

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

2. 對于使用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)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！