前言
最近做了一个vue的单页面应用，并将其部署到github page,这样其他人就可以通过这个网站查看该应用的效果。
这是最近使用TS写的一个vue项目，大家喜欢的话麻烦给个star哇！
1.准备阶段
利用github pages部署项目，首先要在命令行中运行yarn build或者npm run build。
这里建议将源码与预览分为两个仓库储存。比如demo存放src源码，demo-website则存放打包完的dist文件。注意要在.gitignore设置忽略dist目录（重要）
2.预览打包后的效果
平时我们使用脚手架，通过命令yarn serve或者npm run serve进行项目依赖，预览的效果的路径都是src/index.html，既然我们打包完成，就可以预览打包后的效果。可以下载npm i -g serve 或者npm i -g http-server下载一个node.js静态文件服务器。
npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist
3.配置publicPath
前面提到，建议将源码以及打包后的文件分开储存。这假设我的源码push到远程的demo仓库，打算将生成的dist文件push到远程的demo-website仓库。那么现在我们需要进入vue.config.js里面设置一下publicPath路径。
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/demo-website/" : "/"
};
//注意是/demo-website/而不是/demo/。因为我们打算在demo-website上传我们打包后的文件。
4.正确配置静态文件路径
有时候我们需要用到少量的图片，这个时候我们可以将这些静态文件放在public文件夹中，注意这个文件夹是不会被webpack打包的，而是将这些文件直接拷贝到dist文件中。这个时候我们在设置静态文件路径的时候，需要考虑到项目打包时，静态文件与js代码打包后是放在dist目录里的。既然放在了同一层，那么我们再js中获取静态资源的时候，就可以通过相对路径来获取。也就是./xxx.png这种格式。
./指的是相对路径，A文件与B文件在同一级别，在A中要引用B就是./B；/是绝对路径，也就是把部署的路径作为开始寻找的路径；
5.自动部署脚本
前面提到将源码与打包后的资源分开存放，这里我们现在根目录下面新建deploy.sh文件。
# deploy.sh
# 错误时停止
set -e
# 打包
npm run build
# 进入目标文件夹
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
//这里的`<USERNAME>`替换为你自己的用户名，`<REPO>`换为准备存放`dist`的仓库名，这里就是要填`demo-website`而不是`demo`
cd -
最后，进入demo-website的setting，找到github page就可找到自己部署的网址了。
