其实这是一个很简单的事情，但是我以为特别复杂，因为可能不知道哪里就搞错了。

1.设置好vite.config.js

首先，先仔细看构建应用和部署到github pages。

看完这两部分内容之后，就知道了在在 vite.config.js 中设置正确的 base。

如果你要部署在 https://<USERNAME>.github.io/ 上，你可以省略 base 使其默认为 ‘/’。
如果你要部署在 https://<USERNAME>.github.io/<REPO>/ 上，例如你的仓库地址为 https://github.com/<USERNAME>/<REPO>，那么请设置 base 为 ‘/<REPO>/’。

REPO 代表仓库名，USERNAME 用户名。我想要部署的为第二种情况，我的仓库名为fireblogs。

我最终想形成的链接为https://liujiaqi222.github.io/fireblogs/ ，因此我需要如下配置。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base:'/fireblogs/'
})

2. 构建项目

npm run build
# 或者
yarn build

执行上述命令后，就会看到根目录下，多了一个dist文件夹，这便是我们需要部署的文件夹。

3. 预览项目

接着我们本地预览一下：

npm run serve
# 或者
yarn serve

默认vite 生成的项目，package.json 中的srcipt 配置应该是如下

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
}

因此执行npm run serve命令，可以在本地预览一下build 后的项目。

4. 部署到github

如果上面的preview 没有问题，就可以部署到github了。

在github中，我将项目的源代码上传到了master分支，因此接下来要将dist 文件夹上传到另外一个分支，给这个分支起个名字gh-pages。

这里将dist 文件夹上传到gh-pages最简单的方法就是：

git subtree push --prefix dist origin(远程主机的名字) gh-pages

执行这条命令的前提是你已经完成了 git add. git commit git push 这些操作。

5. 开启pages功能

将分支切换到gh-pages，然后save，就能成功开启页面了！