Vite React App 部署到 GitHub Pages 的步骤

在前端开发中，将项目部署到 GitHub Pages 是展示成果的便捷方式。本文将详细介绍如何把 Vite React App 部署到 GitHub Pages。

确保你的项目是基于 Vite 和 React 创建的。如果还没有创建项目，可以使用命令行工具，运行“npm create vite@latest”，然后按照提示选择 React 模板创建项目。

接着，在项目的根目录下找到“package.json”文件。打开它并添加一个新的脚本命令。在“scripts”字段中，添加“"deploy": "npm run build && gh-pages -d dist"”。这个命令的作用是先运行项目的构建命令“npm run build”，将项目打包成生产版本，生成的文件会放在“dist”目录下。然后使用“gh-pages”工具将“dist”目录下的文件部署到 GitHub Pages。

然后，需要安装“gh-pages”依赖。在项目目录下的命令行中运行“npm install gh-pages --save-dev”，这一步会将“gh-pages”添加到项目的开发依赖中。

之后，配置项目的基础路径。打开“vite.config.js”文件，添加或修改“base”选项。将其设置为“'你的 GitHub 用户名.github.io/你的仓库名/'”。这一步非常关键，它确保了项目在 GitHub Pages 上能够正确加载资源。

现在，可以进行部署了。在命令行中运行“npm run deploy”。这时候，项目会先进行构建，然后“gh-pages”工具会将构建后的文件推送到 GitHub 仓库的“gh-pages”分支。

最后一步，在 GitHub 仓库的设置中找到“Pages”选项。在“Source”下拉菜单中选择“gh-pages”分支，然后保存设置。稍等片刻，你的 Vite React App 就会在“你的 GitHub 用户名.github.io/你的仓库名/”这个地址上成功部署并可以访问了。

通过以上步骤，你就可以轻松地将 Vite React App 部署到 GitHub Pages，方便他人访问你的项目成果，也为项目的展示和分享提供了便利。