vue項目添加到github page上

準備工做

一、在本身準備上傳到github上的vue項目下執行 npm run build 打包生成 dist 文件夾
（上傳到 github 上的即爲打包生成的 dist 文件夾）。
  
二、註冊 github （此處不作註冊介紹，默認已經註冊）
   打開 settings 設置，找到Github Pages 的設置
   點擊 source 中的 None，使其成爲 master 分支，點擊save
   以後會看到 github pages 設置的地方多出一個地址，此處即爲 github pages的地址。（以下圖）
複製代碼

紅框中標出的即爲 github pages 的地址

下面開始把準備工做中生成的 dist 文件夾提交到 github 上

一、在你電腦的磁盤上新建文件夾（這裏是你要把項目放在哪便可在哪建立此文件夾），文件夾名稱好比：my-project

二、而後執行git命令把你github中的項目克隆到本地：
git clone github.com/xxx/xxx.git
clone 後面的地址：

三、項目克隆到本地以後，將dist文件夾複製到 my-project 中，而後執行一下命令：

git status  --  列出當前目錄全部沒被git管理和被管理修改但爲提交的文件，此處沒被管理或者
修改成提交的文件名爲紅色。

git add .  --  添加當前目錄下的全部文件和子目錄（執行完以後，在執行 git status 此時文件
變成綠色即爲準備好了提交。）

git commit -m "這次提交要添加的註釋內容寫在此處"

git push  --  提交項目到你的github上（此處按完回車須要輸入你本身的 github帳號/密碼）
而後等待提交便可。
複製代碼

提交完成打開你的 github 便可看到你的dist文件夾已經提交到了 github 上，在打開你的github pages 地址:
jianchaoblog.github.io/dist/index.…
地址後面的 dist/index.html 即爲你上次的目錄名和頁面的名稱。

此處須要注意的點爲，我在按照上述步驟提交完代碼以後，打開 github pages 地址，頁面爲空白，不顯示本身的頁面，這塊的緣由在調試以後發現是由於：

在 npm run build 以前要把 config/index.js 裏面 build 配置項的 assetsPublicPath: '/' 改成 assetsPublicPath: './'而後在提交代碼便可