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

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

前期准备

首先要创建仓库

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

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

仓库地址链接在下：github.com/mjjjh/JSlea…

配置服务

上传完成后打开按如下步骤打开配置出现配置文件在这里插入图片描述

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