自动化部署VUE项目

自己简单写了个vue项目，本来想把它部署到服务器上，发现可以直接自动化部署到Github Page上，在github.io直接访问，每次有更新都会自动化部署，太方便了。

部署流程

初始化项目

npm init vue@latest

这一指令会安装并执行create-vue，它是Vue官方的项目脚手架工具。 创建好项目后，推送到github。

配置github actions

在项目目录增加.github/workflows文件夹，创建main.yml文件。 文件代码如下

name: Build and Deploy
on: # 监听 main 分支上的 push 事件
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 构建环境使用 ubuntu
    steps:         
      - name: Checkout # 获取源码
        uses: actions/checkout@v3 
        with:
          persist-credentials: false

      - name: Install pnpm # 安装pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 6.0.2

      - name: Install and Build # 下载依赖 打包项目
        run: |
          pnpm install
          pnpm run build

      - name: Deploy # 将打包内容发布到 github page
        uses: JamesIves/github-pages-deploy-action@v4 # 使用别人写好的 actions
        with:  # 自定义环境变量
          BRANCH: gh-pages # github page指定分支
          FOLDER: dist # build后生成的目录
          clean: true

新建gh-pages分支

项目初始化后，默认只有main分支，需要新建gh-pages分支，可以在本地建，也可以在远程仓库建，注意代码同步问题。分支建好后，可以在settings里面的pages看到。

设置公共路径

由于项目打包后，不设置公共路径的话，会以/作为根目录，这里需要以github仓库名作为根目录，在vue.config.js设置。joy-tool替换成自己的github仓库名。

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === "production" ? "/joy-tool/" : "/",
})

设置项目权限

以上都设置好后，自动化部署时碰到下面这个错误 需要设置workflow的权限为读写，在项目的Settings->Actions->General页面下，找到workflow permissions。

效果

配置完成后，每次push到github就会自动部署了。 点进pages build and deployment可以看到对应的github page链接。