部署到 GitHub & 设置 publicPath

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://.github.io
# git push -f [email protected]:/.github.io.git master

# 部署到 https://.github.io/
# git push -f [email protected]:/.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--设置预览地址