建站
咨詢
售后
建站咨詢
新聞中心
本篇文章給大家分享的是有關(guān)vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),彝良網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:彝良等地區(qū)。彝良做網(wǎng)站價(jià)格咨詢:13518219792
一、修改配置
1、解決文件路徑問題：
打開項(xiàng)目根目錄config文件夾下的index.js文件，進(jìn)行如下修改：
看清楚是 build（上邊還有個(gè)dev 是開發(fā)環(huán)境下的配置，不需要改動）下的 assetsPublicPath ：將‘/'改為‘./'
2、背景圖片路徑錯誤
在css中寫的background-img的路徑出錯需要找到build文件夾下的utils.js，修改一下位置
打開根目錄build文件夾中的utils.js文件，在下圖中標(biāo)出的位置中添加publicPath: '../../'，
項(xiàng)目打包后dist文件夾下的index.html引入文件沒有引號，這里的解決方法是：
找到build文件夾下的webpack.prod.conf.js文件，在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify，把minify中的 removeAttributeQuotes: true改為 removeAttributeQuotes:false
二、上傳項(xiàng)目到Github
執(zhí)行npm run build命令，打包項(xiàng)目
如果只是想通過github pages預(yù)覽項(xiàng)目，不想上傳整個(gè)項(xiàng)目代碼，可以只將dist文件夾下的文件上傳到github上，然后開啟github pages功能預(yù)覽。在dist文件夾下執(zhí)行以下步驟
1.在github里面新建一個(gè)倉庫
2.將dist文件夾中的文件上傳到這個(gè)倉庫中
git init
git add .
git commit -m '描述信息'
關(guān)聯(lián)到遠(yuǎn)程倉庫：git remote add origin ...
git push -u origin master
如果想管理項(xiàng)目的同時(shí)又可以預(yù)覽，可以將整個(gè)項(xiàng)目都上傳到github，然后將dist文件夾中的文件上傳到倉庫分支中，步驟如下：
1.在github里面新建一個(gè)倉庫,
2.將整個(gè)項(xiàng)目上傳到github
git init
git add .
git commit -m '描述信息'
關(guān)聯(lián)到遠(yuǎn)程倉庫：git remote add origin ...
git push -u origin master
3.然后將遠(yuǎn)程倉庫克隆到本地git clone ...
4.接著在這個(gè)倉庫中建一個(gè)分支
生成分支gh-pages并切換到此分支
進(jìn)入到克隆得到的文件夾中，執(zhí)行如下命令git checkout --orphan gh-pages
5.將克隆得到的文件里面除了.git文件以外的文件全部刪掉，再將項(xiàng)目根目錄下打包后生成的dist文件夾里面的內(nèi)容復(fù)制到克隆文件中。
依次執(zhí)行以下命令：git add .git commit -m “描述信息”
git remote add origin ....（這一步根據(jù)自己創(chuàng)建的倉庫名來寫）
git push -u origin gh-pages （push文件到倉庫中,注意后面是分支的名字,不是master）
以上就是vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章名稱：vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)
網(wǎng)站鏈接：http://fisionsoft.com.cn/article/piiocg.html
