Vite 中构建 Vue/React SPA 的核心是官方插件开箱即用，无需额外配置打包器；Vue 用 create-vue 脚手架集成 Router/Pinia，React 通过 @vitejs/plugin-react 支持 JSX 和 Fast Refresh，并需配置 history 路由及服务器 fallback。

在 Vite 中使用 Vue 或 React 构建单页应用（SPA），核心是通过官方插件快速初始化项目结构，并配合 Vite 的原生 ES 模块支持实现高效开发。不需要额外配置打包器，Vite 本身已为 Vue/React 提供开箱即用的开发体验。

创建 Vue SPA 项目

Vite 官方提供 create-vue 脚手架（基于 Vite），它会自动集成 Vue 插件、路由（Vue Router）、状态管理（Pinia）等 SPA 必需能力。

• 运行命令：npm create vue@latest，按提示选择「TypeScript」「Router」「Pinia」等选项
• 生成的项目默认启用 vite-plugin-vue（由 @vitejs/plugin-vue 提供），支持单文件组件（.vue）解析和热更新
• 入口文件 src/main.js 使用 createApp 创建根实例，挂载到 #app 容器，符合 SPA 模式

创建 React SPA 项目

Vite 内置对 React 的支持，通过 @vitejs/plugin-react 实现 JSX 编译、Fast Refresh 等特性，无需配置 Babel。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

• 运行命令：npm create vite@latest my-react-app -- --template react
• 插件自动处理 .jsx/.tsx 文件，支持 Hooks、Suspense、Concurrent Features
• 搭配 react-router-dom@6 实现客户端路由：在 main.jsx 中用 createBrowserRouter 和 RouterProvider 包裹应用

手动添加插件（进阶场景）

若已有项目或需定制插件行为，可显式安装并配置：

立即学习“Java免费学习笔记（深入）”；

• Vue：安装 @vitejs/plugin-vue，在 vite.config.js 中引入：
  

  import { defineConfig } from 'vite';<br>import vue from '@vitejs/plugin-vue';<br>export default defineConfig({ plugins: [vue()] });

• React：安装 @vitejs/plugin-react，同样在配置中启用；如需调整 JSX 运行时，可传入 react({ jsxRuntime: 'automatic' })
• 注意：Vite 4.0+ 默认启用插件的推荐配置，多数情况无需手动干预

SPA 关键配置要点

确保构建结果适配单页应用行为，重点在路由和静态资源处理：

• HTML 模板：Vite 默认使用 index.html 作为入口，其中必须包含唯一根节点（如 <div id="app"></div>）
• 路由模式：Vue Router 或 React Router 均应使用 history 模式（非 hash），部署时需服务器配置 fallback（如 Nginx 返回 index.html）
• 构建输出：执行 npm run build 后，所有资源打包到 dist 目录，直接托管即可运行 SPA