Vite 如何集成 Vue、React 和 Svelte？插件配置怎么选？

Vite 和框架集成的核心，不是把脚手架命令背下来，而是理解插件负责什么。Vite 自己处理开发服务器、依赖预构建、静态资源和 Rollup 构建；Vue、React、Svelte 这些框架特有的语法转换、热更新和编译选项，则交给对应插件。这样拆开看，配置就不容易乱。

新项目优先用官方模板

创建项目时最稳妥的方式是使用官方模板。模板会装好框架插件、入口文件和基础 TypeScript 配置，适合从零开始。

bash
npm create vite@latest my-vue-app -- --template vue-ts
npm create vite@latest my-react-app -- --template react-ts
npm create vite@latest my-svelte-app -- --template svelte-ts

如果是老项目迁移，不建议一次性照搬模板。更安全的做法是先把构建入口跑通，再逐步迁移别名、环境变量、CSS 预处理器和测试配置。取舍点在于速度和稳定性：新项目追求开箱即用，迁移项目更需要可回滚。

Vue 怎么接入

Vue 项目主要使用 @vitejs/plugin-vue，它负责处理单文件组件、模板编译和 HMR。如果项目使用 JSX 或 TSX，再额外加 @vitejs/plugin-vue-jsx。

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: { alias: { '@': '/src' } }
})

Vue 的边界是插件只负责编译，不替你决定状态管理、路由和组件库。比如 Element Plus、Pinia、Vue Router 都要按各自方式接入。踩坑点是路径别名只配 Vite 不够，TypeScript 还要在 tsconfig.json 里配 paths，否则编辑器会报找不到模块。

React 怎么接入

React 官方插件通常选 @vitejs/plugin-react。它支持 Fast Refresh，也会处理 JSX 转换和 Babel 能力。如果团队追求更快的编译速度，可以评估 @vitejs/plugin-react-swc，但 Babel 插件生态依赖重的项目要谨慎。

ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: { sourcemap: true }
})

这里的取舍很实际：Babel 版兼容性更稳，SWC 版速度更好。大多数业务项目先用 Babel 版足够，只有在冷启动或 HMR 明显慢时再切换。React 17 以前的项目还要确认 JSX runtime 设置，避免升级 Vite 后出现 JSX 编译行为不一致。

Svelte 和 Solid 怎么接入

Svelte 使用 @sveltejs/vite-plugin-svelte，Solid 使用 vite-plugin-solid。这类框架的编译器参与度更高，所以不要随便混用插件顺序。一般把框架插件放在 plugins 数组前面，再放检查、压缩、分析等辅助插件。

ts
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  css: { preprocessorOptions: { scss: { additionalData: '@use "src/styles/vars" as *;' } } }
})

通用配置别忘了配两处

路径别名、环境变量、CSS 预处理器是所有框架都会遇到的配置。Vite 负责运行时和构建解析，TypeScript 负责编辑器和类型检查，两边经常都要配。

json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}

多框架仓库怎么处理

如果一个 monorepo 里同时有 Vue、React 和组件库，建议每个应用保留自己的 vite.config.ts，公共配置抽成函数复用。不要为了“统一”写一个巨大配置文件，然后用一堆条件判断区分框架。那样短期看少了重复，长期会让插件顺序、别名和构建输出互相牵连。

公共层可以放端口约定、alias 生成、环境变量校验和构建分析插件，框架插件仍然留在各应用里。边界清楚以后，某个 React 应用切到 SWC，不会影响 Vue 应用的编译行为。

测试配置也要一起考虑。Vitest、Playwright 或 Jest 不一定自动读取 Vite 的 alias 和 env，迁移时经常出现应用能跑、测试失败的情况。稳妥做法是把路径解析和环境变量校验抽成小工具，应用、测试和构建共用同一份约定。

追问

Vite 集成框架时，插件顺序重要吗？

重要，但不用过度紧张。框架插件通常应该靠前，因为它们要先处理 Vue SFC、JSX 或 Svelte 文件。后面的插件再做检查、分析、压缩或自定义转换。踩坑点是多个插件都改同一种文件时，顺序会影响最终代码，遇到奇怪编译问题先简化 plugins 数组。

Vue 和 React 项目的 Vite 配置差异大吗？

基础能力差不多，差异主要在框架插件。Vue 插件处理模板和 SFC，React 插件处理 JSX、Fast Refresh 和 Babel/SWC 转换。取舍不在 Vite，而在框架生态：Vue 更强调模板编译约定，React 更依赖 JSX 和函数组件习惯。通用配置如 alias、proxy、env、build 基本可以复用。

老 Webpack 项目迁到 Vite 要注意什么？

不要一开始就追求配置完全等价。Webpack loader、DefinePlugin、动态 require、别名和静态资源规则，都可能需要重写成 Vite/Rollup 的方式。边界是能用浏览器原生 ESM 的代码迁移最顺，依赖 CommonJS 魔法写法的项目会更麻烦。建议先迁入口和开发服务器，再处理构建产物差异。

React 插件选 Babel 还是 SWC？

Babel 版生态兼容性更好，适合依赖 Babel 插件、宏或老项目的团队。SWC 版速度更快，适合配置简单、项目较大的场景。取舍是性能换生态，不能只看 benchmark。切换前最好跑完整测试和构建，因为一些非标准语法转换在两边表现可能不同。

为什么 alias 配了 Vite，编辑器还是报错？

因为 Vite 的 resolve.alias 只影响开发服务器和构建。TypeScript、ESLint、测试框架都有自己的解析逻辑，编辑器通常看的是 tsconfig.json。边界是运行能成功不代表类型系统能识别。解决方式是同步配置 compilerOptions.paths，测试工具也要按需补 alias 映射。