最近在用Vue仿寫(xiě)cnode社區(qū)，想要上傳到github，并通過(guò)Github pages預(yù)覽，在這個(gè)過(guò)程中遇到了一些問(wèn)題，因此寫(xiě)個(gè)筆記，以便查閱。

完成Vue項(xiàng)目以后，在上傳到github之前，需要修改一些配置才能通過(guò)github pages預(yù)覽項(xiàng)目。

一、修改配置

1. 解決文件路徑問(wèn)題：
   打開(kāi)項(xiàng)目根目錄config文件夾下的index.js文件，進(jìn)行如下修改：

   
   
   1.png

看清楚是 build（上邊還有個(gè)dev 是開(kāi)發(fā)環(huán)境下的配置，不需要改動(dòng)）下的 assetsPublicPath ：將‘/'改為‘./'

2. 背景圖片路徑錯(cuò)誤
   在css中寫(xiě)的background-img的路徑出錯(cuò)需要找到build文件夾下的utils.js，修改一下位置
   打開(kāi)根目錄build文件夾中的utils.js文件，在下圖中標(biāo)出的位置中添加publicPath: '../../'，　

   
   
   2.png

3. 項(xiàng)目打包后dist文件夾下的index.html引入文件沒(méi)有引號(hào)，這里的解決方法是：

找到build文件夾下的webpack.prod.conf.js文件，在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify，把minify中的 removeAttributeQuotes: true改為 removeAttributeQuotes:false

3.png

二、上傳項(xiàng)目到Github

執(zhí)行npm run build命令，打包項(xiàng)目

如果只是想通過(guò)github pages預(yù)覽項(xiàng)目，不想上傳整個(gè)項(xiàng)目代碼，可以只將dist文件夾下的文件上傳到github上，然后開(kāi)啟github pages功能預(yù)覽。在dist文件夾下執(zhí)行以下步驟

1.在github里面新建一個(gè)倉(cāng)庫(kù)
2.將dist文件夾中的文件上傳到這個(gè)倉(cāng)庫(kù)中

• git init
• git add .
• git commit -m '描述信息'
• 關(guān)聯(lián)到遠(yuǎn)程倉(cāng)庫(kù)：git remote add origin ...
• git push -u origin master

如果想管理項(xiàng)目的同時(shí)又可以預(yù)覽，可以將整個(gè)項(xiàng)目都上傳到github，然后將dist文件夾中的文件上傳到倉(cāng)庫(kù)分支中，步驟如下：

1.在github里面新建一個(gè)倉(cāng)庫(kù),
2.將整個(gè)項(xiàng)目上傳到github

• git init
• git add .
• git commit -m '描述信息'
• 關(guān)聯(lián)到遠(yuǎn)程倉(cāng)庫(kù)：git remote add origin ...
• git push -u origin master

3.然后將遠(yuǎn)程倉(cāng)庫(kù)克隆到本地
git clone ...

4.接著在這個(gè)倉(cāng)庫(kù)中建一個(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)建的倉(cāng)庫(kù)名來(lái)寫(xiě)）
git push -u origin gh-pages （push文件到倉(cāng)庫(kù)中,注意后面是分支的名字,不是master）