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的步骤类似！