vue-cli項目部署到Gitee Page

為什么不選擇Github Page？原因很簡單，因為Gitee不用FQ速度快！

1.創建倉庫

這步比較簡單，就不做演示了；

2.添加vue.config.js文件

由於使用vue-cli3創建的項目隱藏了webpack的配置，所以需要該文件來修改部分的webpack配置。文件內容如下：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-div-ui/'
    : '/'
}

vue-div-ui指的是Gitee上對應的倉庫名；

注意：在根目錄下添加該文件；

3.創建自動化腳本deploy.sh

同樣的，在根目錄創建一個腳本文件deploy.sh，用於將代碼打包和代碼推送等指令進行整合：

# `deploy.sh`

# 當發生錯誤時中止腳本
set -e

# 構建
npm run build

# cd 到構建輸出的目錄下 
cd dist

git init
git add -A
git commit -m 'update commit'

git remote add origin https://gitee.com/ahuntsun/vue-div-ui.git
# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f origin master

cd -

4.在package.json中添加scripts

為了通過npm執行deploy這個腳本文件，需要在package.json中新增scripts配置：

  "scripts": {
    "deploy": "bash deploy.sh"
  },

隨后便可以在項目的根目錄下通過執行

npm run deploy

完成腳本文件中設置的項目打包，推送等一系列操作了，十分方便：

5.注意點

如果項目涉及到路由跳轉，最好關閉history模式，因為Gitee Page可能不支持該模式；

部署到Github Page的步驟類似！