前言

#!/usr/bin/env bash
rm -rf dist
npm run build -- --base=/[仓库名]/
cd dist
git init
git checkout -B main
git add -A
git commit -m 'deploy'
git push -f git@github.com:[你的github昵称]/[仓库名].git main:preview-pages
echo "================部署成功========================"
cd -
git home

上面的 bash 脚本，对不同的项目的话，每次都要去手动修改，有的时候有可能会忘记，于是我们需要对以上脚本进行可交互式改写。

可交互式脚本代码

在当前仓库里创建 preview-pages

#!/usr/bin/env bash
function set_env {
  name=$1
  hint=$2
  [[ ! -z "${!name}" ]] && return
  while [ -z "${!name}" ]; do
    [[ ! -z "$hint" ]] && echo "> 请输入 $name: $hint" || echo "> 请输入 $name:"
    read $name
  done
  if [ ! -s ./.env ]; then
    echo "export $name=\"${!name}\"" > ./.env
  else
    sed -i "1s/^/export $name=\"${!name}\"\n/" ./.env
  fi

  echo "${name} 已保存至 ./.env 。如果需要修改，请自行编辑 ./.env"
}

touch ./.env && source ./.env
set_env user "GitHub 用户名"
set_env repo "GitHub 仓库名"

rm -rf dist
npm run build -- --base "/$repo"
cd dist
git init
git checkout -B main
git add -A
git commit -m 'deploy'
git push -f git@github.com:$user/$repo.git main:preview-pages
cd -
git home

在 .env 文件补全以下属性

# repo 是没有的 需要自己补全
export repo="仓库名"
export user="github 用户名" 

创建新仓库作预览

function set_env {
  name=$1
  hint=$2
  [[ ! -z "${!name}" ]] && return
  while [ -z "${!name}" ]; do
    [[ ! -z "$hint" ]] && echo "> 请输入 $name: $hint" || echo "> 请输入 $name:"
    read $name
  done
  if [ ! -s ./.env ]; then
    echo "export $name=\"${!name}\"" > ./.env
  else
    sed -i "1s/^/export $name=\"${!name}\"\n/" ./.env
  fi

  echo "${name} 已保存至 ./.env 。如果需要修改，请自行编辑 ./.env"
}

touch ./.env && source ./.env
set_env user "GitHub 用户名"
set_env repo "GitHub 仓库名"

rm -rf dist
npm run build -- --base "/$repo"
cd dist
git init
git add .
git commit -m "deploy"
git branch -M master
git remote add origin git@github.com:$user/$repo.git
git push -f origin master:master
cd -
git home

此时自动化生成的 .env 文件

export repo="仓库名"
export user="github 用户名"

关于 git home

git home 在 mac/win 里是自带的，作用是在默认浏览器打开当前项目, 也可以在 windows 使用 git open, 没有安装的话需要 npm i -g git-open