vue-cli 3.x 项目部署到 github pages

GitHub Pages，这是github免费为用户提供的服务。无论你是文字工作者或是程序开发人员，你都可以写博客，或者部署一些纯静态的项目到上面。

最近因为有 vue cli 3.x 项目需要部署到 github pages，但因为网络上的教程大部分是vue cli 2.x的。最后在官网文档找到解决方法，说明自己要多看官方文档而不是总爬贴，能节省很多时间，中间本人所踩到的坑，先记录如下。

一、vue-router 不要开启 history模式

如果你在 history 模式下使用 Vue Router，是无法搭配简单的静态文件服务器的。为了解决这个问题，又需要配置生产环境服务器。因为要部署到 github pages，所以关闭history模式或是切换到hash模式都可以。

二、在 vue.config.js 中设置正确的 publicPath。

1、如果打算将项目部署到 https://<USERNAME>.github.io/ 上, publicPath 将默认被设为 "/"，你可以忽略这个参数。

2、如果打算将项目部署到 https://<USERNAME>.github.io/<REPO>/ 上 (即仓库地址为 https://github.com/<USERNAME>/<REPO>)，可将 publicPath 设为 "/<REPO>/"。举个例子，如果仓库名字为“my-project”，那么 vue.config.js 的内容应如下所示：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

3、在项目目录下，创建内容如下的 deploy.sh (可以适当地取消注释) 并运行它以进行部署：

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

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

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

4、部署命令是 bash deploy.sh。

参考：

1、github pages 官方说明

2、vue cli 3.x 部署官方说明

3、vue cli 3.x 项目部署到 github pages

赏

谢谢你请我吃糖果