使用github部署Vite打包的项目

vue项目部署在GitHub上
介绍：
使用pnpm包管理，通过在github线上打包，部署在线页面

前期准备

首先要创建仓库

需要注意仓库名字需要后缀.github.io ,公开

然后要有个vue项目。因为我是用vite打包的需要改下配置，防止线上打包时静态资源路径出现问题，需要和你仓库名字一样

仓库地址链接在下：https://github.com/mjjjh/JSlearn.github.io

配置服务

上传完成后打开按如下步骤打开配置

出现配置文件

static配置

因为我是使用pnpm打包的
使用如下指令

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'pnpm'
      - run: pnpm -v
      - run: pnpm install
      - name: Build
        run: pnpm run build
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

千万注意-后面要加空格，：后面也要加空格
对于相关的version你可以按自己的项目来选择

然后进入Actions运行


点击进入自动部署

部署完成后就会看到给你的网址就可以打开了

报错

如果出现报错，可能是你的配置文件有问题

打开Code的workflows检查配置文件，再重复上述步骤即可

部署完成

至此部署完成

仓库地址链接在下：https://github.com/mjjjh/JSlearn.github.io