将 Vite 项目打包并部署到 GitHub Pages 的经验分享这样设置后，生成的 index.html 就会去 /

将 Vite 项目打包并部署到 GitHub Pages 的经验分享

项目概述

今天分享一下如何将我名为 **SuperDoctor** 的项目中的 Vite 前端目录打包并顺利部署到 GitHub Pages 的过程。项目中有一个 **doctor_front** 的 Vite 前端目录，起初它是未打包的。通过一些探索和不断尝试，我总结出了以下步骤。

操作步骤

1. 进入 Vite 项目目录

首先，我们需要打开终端并切换到 **doctor_front** 目录。接下来的所有命令和文件修改都将在这里进行，所以务必要确保我们处于正确的目录中：

cd doctor_front

2. 安装 `gh-pages` 包

接下来，我们需要安装一个叫做 `gh-pages` 的包，它可以帮助我们将项目部署到 GitHub Pages。可以在终端中输入以下命令：

npm install gh-pages --save-dev

3. 修改 Vite 配置

为了确保打包后的文件能够正确找到静态资源，我们需要稍微调整一下 **vite.config.js** 文件。在 `plugins` 的旁边添加 `base` 配置，如下所示：

export default {
  // 其他配置...
  base: '/SuperDoctor/',
}

这样设置后，生成的 index.html 就会去 /SuperDoctor/ 这个路径寻找资源。

4. 更新 `package.json` 文件

接下来，我们要对 **package.json** 文件中的 `scripts` 部分进行一些修改。这里新增的 `predeploy`、`deploy` 和 `homepage` 字段可以参考下面的代码：

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist --repo git@github.com:JacksonHe04/SuperDoctor.git"
},
"homepage": "https://jacksonhe04.github.io/SuperDoctor/"

5. 提交并推送更改

完成上述修改后，我们要将更改提交到本地 Git 仓库并推送到远程仓库。可以使用以下命令：

git add .
git commit -m "Update Vite config and package.json for deployment"
git push origin main

6. 执行部署命令

这时候，我们可以在终端输入以下命令来开始部署。这将自动打包项目并将生成的内容推送到 `gh-pages` 分支中，部署到指定的网址：

npm run deploy

7. 检查部署状态

最后，在 GitHub 仓库中查看 **Actions** 选项卡，确认是否有正在运行的部署工作流。等候片刻（通常约一分钟），一旦完成，你就可以访问这个网址来查看效果：

https://jacksonhe04.github.io/SuperDoctor/

解决问题的经历

在这个过程中，我碰到了一些问题，尤其是在部署后，网址可以打开但页面却是空白。于是，我开始了我的调试之旅。

资源未找到：我打开了 F12 调试工具，确认元素中的 HTML 内容正常，id = app 也存在。可控制台却显示缺少 assets 的 JS 和 CSS 文件。
配置问题：我发现 index.html 中的资源引用地址为 https://jacksonhe04.github.io/，而不是 https://jacksonhe04.github.io/SuperDoctor/，导致资源无法找到。
解决方案：最后，我将 vite.config.js 文件中的 base 改为 /SuperDoctor/，重新推送并部署后，问题就解决了。新的配置如下：

export default {
  // 其他配置...
  base: '/SuperDoctor/',
}

重新部署：再次执行部署命令，打开网址，一切恢复正常！

小贴士

在访问部署网址时，记得等 GitHub Actions 工作流运行完成后再打开链接。浏览器的缓存可能会让你在刷新后看不到最新内容，最好在工作流完成后直接访问。

希望这些经验能对你们有所帮助！如果在操作过程中遇到问题，不妨参考一下这些步骤。