在 vite 项目中配置扩展功能，核心是安装并导入 `@vitejs/plugin-react`（或其他框架插件）到 vite.config.js 中。通过修改配置文件中的 plugins 数组，vite 会在构建时自动处理 jsx、typescript 或 css 预处理等逻辑。确保插件按正确顺序排列，以避免转换冲突。
如何安装和注册 React 插件
要启用 React 支持，需先运行 npm install -D @vitejs/plugin-react 安装依赖，然后在 vite.config.js 中引入该模块并将其加入 plugins 数组。这样 Vite 就能识别 .jsx 文件中的 JSX 语法并进行编译。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});
上述代码展示了最基础的配置方式。执行 npm run dev 后，Vite 会启动开发服务器，此时任何包含 JSX 的组件都能被正确解析。如果项目同时使用 TypeScript，该插件默认也支持 .tsx 文件，无需额外配置。
立即学习“Java免费学习笔记（深入）”；
如何处理 CSS 预处理器如 Sass
若项目需要使用 Sass 或 Less，必须安装对应的 Node.js 包，例如 npm install -D sass。Vite 内置了对这些预处理器的支持，但需要在项目中实际安装它们才能工作。配置时无需在 vite.config.js 中添加新插件，只需确保安装了相应的依赖即可。
// package.json 依赖示例
"devDependencies": {
"sass": "^1.50.0"
}
安装完成后，直接在 Vue 或 React 组件中使用 <style lang="scss"></style> 标签即可。Vite 会自动调用底层的 Sass 编译器将 SCSS 转换为浏览器可识别的 CSS。这种按需加载的方式比 Webpack 时代的 loader 配置更简洁，减少了构建配置的复杂度。
当插件顺序错误时会发生什么
如果多个插件存在依赖关系，错误的顺序会导致构建失败。例如，某些转换插件必须在 React 插件之前运行，否则 JSX 可能未被正确转换就进入了后续处理流程。Vite 严格按照数组顺序执行插件钩子，因此调整 plugins 的顺序至关重要。
