Vite部署静态React应用

在前端开发领域，Vite凭借其快速的构建和热更新能力，成为了众多开发者的首选工具。而将React应用与Vite相结合，并进行静态部署，能够为用户带来高效且流畅的体验。本文将详细介绍如何使用Vite部署静态React应用。

确保你已经安装了Node.js和npm（或yarn）。创建一个新的React项目，可以使用Vite提供的官方模板：在终端输入npm create vite@latest my - react - app --template react，其中my - react - app是项目名称，你可以根据需要自行设定。

进入项目目录：cd my - react - app，然后安装项目依赖：npm install 或 yarn install。

开发过程中，我们可以通过 npm run dev 或 yarn dev 启动本地开发服务器，Vite会自动开启热更新，方便我们实时看到代码更改后的效果。

当开发完成，需要进行部署时，运行 npm run build 或 yarn build 命令。Vite会对React应用进行优化和打包，生成一个 dist 目录，里面包含了所有静态资源和HTML文件。

接下来是部署环节。如果选择将应用部署到GitHub Pages，首先要确保项目已初始化Git仓库，通过 git init 命令进行初始化，然后将代码提交到远程仓库。

在项目根目录下创建一个名为 deploy.sh 的脚本文件，内容如下：

#!/bin/bash
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh - pages
cd -

将 <USERNAME> 和 <REPO> 替换为你自己的GitHub用户名和仓库名。

赋予脚本执行权限：chmod +x deploy.sh，然后运行脚本：./deploy.sh。这样，你的静态React应用就成功部署到GitHub Pages上了。

除了GitHub Pages，还可以将 dist 目录下的内容上传到其他静态文件托管服务，如Netlify、Vercel等，每个平台都有相应的部署步骤，按照官方文档操作即可轻松完成部署。通过Vite部署静态React应用，能够快速将项目上线，为用户提供优质的前端体验。