使用 Vite + React 进行本地编译与测试

Vite 是一个快速、轻量级的构建工具，旨在提供极致的开发体验。本文将展示如何在使用 React 和 Vite 的项目中进行本地编译、测试以及预览。

1. 初始化项目

假设你已经成功使用 Vite 和 React 初始化了一个项目，并完成了开发，现在你希望能够将项目进行本地构建并进行测试。

2. 本地构建项目

在项目根目录中，通过以下命令构建项目：

npm run build

这将触发 Vite 的构建流程，最终在项目的根目录生成一个 dist 文件夹。这个文件夹包含了编译后的静态文件，类似于传统的前端构建工具（如 Webpack）的打包输出。构建完成后的目录结构通常如下所示：

dist/
  ├── index.html
  ├── assets/
  │   ├── index-[hash].js
  │   ├── index-[hash].css
  │   └── ...（其他资源文件）

目录结构解析

•    index.html: 这个文件是应用的入口点，也是你可以通过浏览器访问的页面。
•    assets/: 存放项目中的静态资源，包括 JavaScript、CSS 和其他资源文件。通过使用哈希值（index-[hash].js 和 index-[hash].css），Vite 可以确保每次构建时文件具有唯一性，以便更好地利用浏览器缓存。

3. 本地预览

构建完成后，你可以通过以下命令在本地预览项目：

npm run preview

该命令启动一个本地服务器，用于展示 dist 文件夹中的内容，这对于检查构建结果是否正确非常有用。默认情况下，Vite 会在 http://localhost:4173 端口上提供服务，打开浏览器并访问这个地址，就可以预览打包后的应用。

4. 使用 Serve 包本地预览

如果你更习惯使用其他服务器工具，也可以通过安装 serve 包来本地预览项目。serve 是一个轻量级的静态服务器，用来提供打包后的内容。

首先，确保全局或项目中安装了 serve：

npm install -g serve

接着，可以通过以下命令启动本地服务器：

npx serve dist

运行此命令后，serve 会在本地启动一个 HTTP 服务器，你可以访问本地地址来查看项目的构建结果。