1、打开终端，输入yarn build进行打包,目录会出现一个dist目录，点击终端出现的链接。
1.png
2、进入链接页面，切换成中文，按照提示在终端输入
yarn global add serve进行安装（我这里用yarn命令安装会快点），安装完输入serve -s dist，这时出现一个本地链接，打开就能看到本地预览。这两个命令是用来验证你打包是否正常。
2.png
注意：提示一下平时我们用的yarn serve打开的是目录src文件本地预览。用serve -s dist打开的时dist文件预览,两者有一定的区别。前者打开文件包括TS、SCSS等都是没有经过打包的，文件体积较大；后者打开的都是经过打包的，转换成JS、CSS的，文件体积比较小。
3、将项目布置到github上，在github新建一个仓库名（名字无所谓）：record，关联到我们本地仓库。将你的页面出现这三行代码在终端目录运行一次，就能完成关联。
4.png
（1）、在vue.config.js内容加上下面内容，注意仓库名改成你的仓库名字。注意这个仓库名是下面说到仓库名（remoney-website）
3.png
（2）、在项目目录下，创建内容如下的 deploy.sh (可以适当地取消注释) 并运行它以进行部署。deploy.sh 的内容如下：
#!/usr/bin/env sh
# 当发生错误时中止脚本
set -e
# 构建
yarn 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 -
注意deploy.sh文件要修改这部分内容变成自己的：因为我是布置在仓库的，只需修改这部分内容即可。
待修改部分
首先再在github上面创建一个仓库，仓库名：remoney-website，这个是用来展示dist最终预览效果的。复制圈红部分地址，到deploy.sh文件待修改部分。
6.png
将前面#号去掉，将画红圈部分替换成自己刚刚新建的仓库（remoney-website）的地址。
已替换的
（3）、在终端运行sh deploy.sh，就会按照你刚刚部署，将dist上传到你的仓库（remoney-website）中，这个仓库只有dist文件内容。点击github页面的：setting--GitHub Pages--Check it out here--设置预览地址
