Vue Cli 3 部属到 Github 上 ( windows )-58码农网

Vue Cli 部属到 Github 上，研究了许久，以下这里做步骤笔记，这里是以 windows 系统为主，需要先安装 Git 工具，连结放在最下面:

在桌面上新增 Cli 专案，这里开 test20200915
如下图:

http://img2.58codes.com/2024/20115976MXAtZMjXvJ.png

在 Github 上开一个 repository，採取第一个方法，且是用 HTTPS 模式
下图新增完 test20200915 repository:

http://img2.58codes.com/2024/20115976otiB3B8mAt.png

接着用 cmd 视窗进入到 test20200915 内，且贴上刚刚 repository 的第一个方法
如下图:

http://img2.58codes.com/2024/20115976fQiZTrFOGY.png

这时候刷新 Github 就会有东西上传上去了
如下图:

http://img2.58codes.com/2024/20115976c0cpidWB6O.png

接着在 test20200915 专案内，新增 vue.config.js
如下图:

http://img2.58codes.com/2024/20115976QOMpRR2ZoL.png

内容如下:

module.exports = {  publicPath: process.env.NODE_ENV === 'production'    ? '/test20200915/' // test20200915 为 repo 名称    : '/'}

接着在 test20200915 专案内，新增 deploy.sh 档案

http://img2.58codes.com/2024/20115976OWf1YLD85v.png

内容如下:

#!/usr/bin/env sh# 当发生错误时终止脚本运行set -e# 建立输出档案npm run build# 移动至到打包后的dist目录 cd dist# 因为dist资料夹预设是被ignore的，因此在进入dist资料夹后初始化gitgit init git add -Agit commit -m 'deploy'# 将 dist资料夹中的内容推送至远端 hexWeek6Demo的 gh-pages分支中，并强制无条件将旧有的内容取代成目前的内容（指令 git push -f)git push -f https://github.com/YAngTsungJen/New-home.git master:gh-pagescd -# 执行指令，在终端机输入 deploy.sh

https://github.com/YAngTsungJen/New-home.git 需替换成自己的 Github repo
去 Github 上複製，如下图:
7. 接着打开 Git 工具，进入到 test20200915 专案内，执行 sh deploy.sh
如下图:
8. 刷新 Github 就会发现多了一个 gh-pages 的分支，build 出来的 dist 资料夹内的内容都会被放在这里
如下图:
9. 进入 repository 的 setting 的 Github Pages 部分，选择 gh-pages 然后 save，该网址即可以使用
如下图:
10. 专案内如有更动，即可使用 git add .
git commit -m "修改内容"
git push
三个指令先更新 Github 上 master 的部分
11. 接着在 Git 工具执行 sh deploy.sh 更新 gh-pages 的部分，即完成所有动作