vite 打包 + 自动部署

注意点1

如果说你的仓库是 你的名字/xxx，此时一定要记得改 vite.config.ts 里面的路径，即在配置信息里面添加 base: './', ：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
// https://vitejs.dev/config/
const config=({mode})=>{
    return{
        // 注意修改路径为此！
        base: './',
        plugins: [],
        resolve: {},
    }
}
export default defineConfig(config)

注意点2

在仓库里面建一个文件：.github/workflows/ci.yml ，复制以下代码：

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: ['main']

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:      

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# 允许一个并发的部署
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 单次部署的工作描述
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
          branch: gh-pages
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

随便在main推点东西，我们即可看见仓库后面有黄点，然后等待几分钟变成绿点，代表你已经打包好了。