前言：相信很多前端開發者都擁有自己的vue項目，若想把自己的項目做成網站分享給大家看，最常用的就是利用Github提供的GitHub Pages服務和Gitee提供的Gitee Pages服務。其中，Github是國外網站，Gitee是國內網站（訪問速度較快）。本文給大家介紹的是如何將 vue-cli 3.0+項目部署到github pages 並同步到 gitee Pages上。
一、服務說明與注意事項
在你的github項目設置的GitHub Pages項，有這么一句話：
GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.
譯：GitHub Pages旨在從GitHub存儲庫中托管您的個人、組織或項目頁面。
這句話主要是介紹GitHub Pages的宗旨，Github Pages 官網上有其他的一些介紹，由於都是英文，我們看着費勁，不如直接看Gitee Pages 服務的說明，兩者都差不多。
注意事項大家了解一下切勿違反就行，這里重點給大家說的是紅框圈出的內容，Pages服務只支持靜態項目，若你的項目需要服務器支持，就不適合部署到這上面了。
二、項目配置注意事項
1、vue-router 不要開啟 history 模式
正常項目中我們會因為網站路徑中帶有“#”而將vue-router開啟history模式，以去掉#號。但開啟history模式需要服務器的支持，因此在github pages中不支持這一模式，所以我們不能開啟history模式。
2、在 vue.config.js 中設置正確的 publicPath
要將項目部署到 https://<USERNAME>.github.io/<REPO>/ 上 (即倉庫地址為 https://github.com/<USERNAME>/<REPO>)，可將 publicPath 設為 "/<REPO>/"。
舉個例子，我的倉庫名字為“vue-admin-web”，那么 vue.config.js 的內容應如下所示：
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/vue-admin-web/'
: '/'
}
三、部署github項目
做好上述的配置后，就可以把項目推送到github上了，這里假設你已經建好了倉庫，並成功把項目推送到了該倉庫下。接下來，我們有兩種方法，把你的項目部署到github pages上。【參考 vue-cli 官方說明】
方法一：手動推送更新
1、在項目目錄下，創建內容如下的 deploy.sh 文件
#!/usr/bin/env sh
# 當發生錯誤時中止腳本
set -e
# 構建
npm run build
# cd 到構建輸出的目錄下
cd dist
git init
git add -A
git commit -m 'deploy'
# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
2、運行該文件
在項目目錄下打開cmd命令窗口（快捷方法：在項目目錄下，按住Shift鍵，然后鼠標右鍵，選擇“在此處打開命令窗口”）
// Linux環境下
bash deploy.sh
// Windows環境下
deploy.sh
運行后，git就會執行該文件里的命令。大致就是，構建打包項目代碼，然后將打包后的代碼上傳到倉庫中的 gh-pages 分支。（注意：新建的倉庫默認只有master分支，沒有gh-pages分支，但不需要你手動新建該分支，運行該文件后，會自動幫你生成gh-pages分支）
這樣，你的項目就已經部署到github pages 了。在你的github項目的 Settings - Options 下的 GitHub Pages項里，可以看到你的項目線上網站地址。
示例：https://marco-hui.github.io/vue-admin-web/
方法二：使用 Travis CI 自動更新
上面手動更新的方法已經能夠完成項目的部署了，但每次版本迭代，你都需要手動去執行一下deploy.sh這個文件，雖然也不是很麻煩，但精益求精的我們，自然希望更簡單一點，就是當你把代碼push到master分支后，就可以自動去完成構建和上傳gh-pages分支，即自動完成部署。利用Travis CI就可以做到這點：
1、生成一個擁有“repo”權限的 GitHub 訪問令牌 。
獲取令牌方法按照github官網介紹去操作就行，很簡單，這里不多做介紹。
2、授予 Travis 訪問倉庫的權限
用你的github賬號，登錄 Travis CI 官網，登錄完成后，點擊頁面左邊的新建按鈕，進入你的倉庫頁面。
在這個頁面會顯示你github上所有的項目，打開你所要部署的項目開關后，點擊 Settings 。
在設置頁中，我們需要定義幾個環境變量，如下圖所示。
定義完畢后，進入第3步。
3、在項目根目錄下創建一個內容如下的 .travis.yml 文件。
language: node_js
node_js:
- "8"
install:
- npm install
script:
- npm run build
after_success:
- cd ./dist
- git init
- git config --global user.name "${U_NAME}"
- git config --global user.email "${U_EMAIL}"
- git add .
- git commit -m "Automatically update from travis-ci"
- git push --quiet --force "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}
branches:
only:
- master
4、將 .travis.yml 文件推送到倉庫來觸發第一次自動構建。
.travis.yml上傳到倉庫的master分支后，會自動進行一次構建部署，此后的所有git push 到master的操作，都會觸發自動更新。這樣，你的github pages網站就會實時更新最新內容啦。
至此，我們就完成了Vue項目自動部署到GitHub Pages啦！但github畢竟是國外網站，有時訪問起來特別慢，所以我們就會考慮把項目部署到國內網站gitee上面。有了github項目的基礎，部署到Gitee Pages就變得尤為簡單啦，只需要在gitee上同步github的項目即可。
四、同步到Gitee Pages
1、導入github項目
登錄Gitee官網，在右上角 “+” 中選擇“從GitHub導入倉庫”，當然前提是你已經綁定了github賬號作為你的gitee第三方賬號，未綁定的在 設置 - 第三方賬號綁定 即可。
進入到導入Github倉庫頁，選擇你要導入的項目。
導入成功后，你會發現，除了master的代碼被導過來，所有分支和標簽也被同步過來了。
2、開啟Gitee Pages服務
項目導入成功后，接下來我們需要開啟該項目的Gitee Pages服務。點擊項目上方的 服務-Gitee Pages，進入Gitee Pages 服務配置頁。
部署分支選擇 gh-pages，部署目錄不填，勾選強制使用HTTPS，點擊啟動，隨后會進行部署。
部署成功后，會在當前頁面看到你的Gitee Pages網站地址，打開地址即可看到你的項目網站，和GitHub Pages的一模一樣，而且Gitee Pages網站加載會快很多。
示例：https://marco-hui.gitee.io/vue-admin-web
3、項目更新
往后項目的更新，首先還是先將代碼push到github上面，待GitHub Pages部署成功后，再在gitee的項目中，點擊更新按鈕，將github項目的代碼強制同步到gitee中即可。
以上，我們就完成了將Vue 項目部署到GitHub Pages，且實現自動部署，並同步到Gitee Pages上。
附：
項目github地址：Marco-hui/vue-admin-web
項目GitHub Pages網站地址：https://marco-hui.github.io/vue-admin-web
項目Gitee Pages網站地址：https://marco-hui.gitee.io/vue-admin-web