如何把 Vue2 项目部署到github

1. 终端输入 npm run build/ yarn build 进行打包

control + 点击出现的链接打开，会跳转到 vue Cli 的部署章节

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

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

module.exports = {
  publicPath:'',   //暂时设置为空字符串
  ...
}  

2. 打开github官网

创建一个新的仓库 repository 名字自取, 这里叫：xxx-1

1. 把画红线的复制到命令终端执行（意思是添加一个origin的远程仓库）

   
   

2. 再用 set-url(替换原本的add) 设置 远程仓库origin 的url。 如果你不设置将会 无法推送代码 和 无法拉取代码
   git remote set-url origin git@github.com:xxx

3. git push -u origin main (这里的main也可以改为master，看个人喜欢哪个分支)

这样你项目的源码就能在当前github仓库页面显示了, 没有的话可以刷新一下。

3.在项目目录下，创建内容如下的 deploy.sh (可以适当地取消注释) 并运行它以进行部署：（注意是在项目目录下，不要创建在其它目录！）

部署 | Vue CLI (vuejs.org) 可在这里官网复制

#!/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 -

此时我们还需要在 github 上再新建一个仓库。这次叫 xxx-2。 刚才的 xxx-1 是用来存放源码的；xxx-2是用来进行预览的

创建好后把 ssh 复制到 deploy.sh  中的取消注释了的
git push ssh master:gh-pages 中

4. 再次设置publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'  //把 my-project 换成xxx-2的仓库名
    : '/'
}

5、运行 sh deploy.sh 部署

如果修改了代码就要重新运行 sh deploy.sh
注意这里需要在 bash 中运行， powershell 里面将会报错

6. 设置预览地址

1. 点击xxx-2 仓库的右边设置

2. 勾选它↓