框架集成

前端

Vite

框架集成

Vite 框架无关，通过官方插件提供对 Vue、React、Svelte 等主流框架的一流支持。

React

创建项目

npm create vite@latest my-react-app -- --template react
npm create vite@latest my-react-app -- --template react-ts  # TS 版本

核心插件

npm i -D @vitejs/plugin-react

// vite.config.js
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'automatic',     // 默认，自动导入 jsx-runtime
      // jsxRuntime: 'classic',     // 需要手动 import React
      jsxImportSource: '@emotion/react',  // 自定义 JSX 运行时（CSS-in-JS）
      babel: {
        plugins: [],                // 额外的 Babel 插件
        babelrc: false,             // 是否使用 .babelrc 配置
      },
    }),
  ],
})

JSX + TS 配置

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",      // 默认
    "types": ["vite/client"]
  }
}

React Fast Refresh

@vitejs/plugin-react 内置 Fast Refresh 支持，修改 React 组件时保持组件状态。

工作原理：用 Babel 为每个组件注入 HMR 签名，检测到变化时只替换组件而不卸载。

🚨 陷阱：React Fast Refresh 只对导出组件生效。匿名组件和命名不规范的组件（非 PascalCase）无法享受状态保持。

常用搭配

// 路径别名
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
    },
  },
})

// tsconfig.json 中同步设置路径别名
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  }
}

Vue

创建项目

npm create vite@latest my-vue-app -- --template vue
npm create vite@latest my-vue-app -- --template vue-ts    # TS 版本

核心插件

npm i -D @vitejs/plugin-vue

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      // 是否使用 Vue 的宏（默认 true）
      // reactivityTransform: true,  // Vue 3.3 后已移入 Vue Macros
      template: {
        compilerOptions: {
          // 自定义元素识别
          isCustomElement: (tag) => tag.includes('-'),
          // 移除空白
          whitespace: 'condense',
        },
        // 模板编译选项
        transformAssetUrls: {
          base: '/',
        },
      },
    }),
  ],
})

Vue JSX/TSX

npm i -D @vitejs/plugin-vue-jsx

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      // babel 插件选项
      transformOn: true,
      mergeProps: true,
    }),
  ],
})

Vue SFC 特性

Vite 原生支持 Vue SFC 的以下特性：

特性	说明
`<script setup>`	Composition API 语法糖，开箱即用
`<style scoped>`	组件作用域样式，自动生成 data-v-xxx 属性
CSS Modules	`.module.css` 在 `.vue` 文件中也支持
`<style vars>`	CSS 变量驱动（实验性）
Asset 引用	`<img src="./logo.png">` 直接解析
HMR	组件热更新，保留状态

Auto Import（可选）

npm i -D unplugin-auto-import unplugin-vue-components

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts',
    }),
    Components({
      dts: 'src/components.d.ts',
    }),
  ],
})

Svelte

npm create vite@latest my-svelte-app -- --template svelte

npm i -D @sveltejs/vite-plugin-svelte

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

export default defineConfig({
  plugins: [svelte()],
})

SolidJS

npm create vite@latest my-solid-app -- --template solid

import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solid()],
})

原生 JS / TS

npm create vite@latest my-app -- --template vanilla
npm create vite@latest my-app -- --template vanilla-ts

不需要任何插件。TypeScript 原生支持——Vite 内部用 esbuild 编译 .ts 文件，仅做类型擦除（不做类型检查）。

// vite.config.js
export default defineConfig({
  // 原生 JS/TS 项目最小配置
  // 什么都不需要，Vite 自动处理 .ts .js
})

💡 最佳实践：要获得 TypeScript 的类型检查，在构建脚本中加 tsc --noEmit："build": "tsc --noEmit && vite build"

多框架共存（微前端）

Vite 允许一个项目中同时使用多种框架：

import vue from '@vitejs/plugin-vue'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    vue({
      include: [/\.vue$/],          // 只处理 .vue 文件
    }),
    react({
      include: [/\.react\.jsx$/],    // 只处理 .react.jsx 文件
    }),
  ],
})

插件可以通过 include/exclude 精确控制处理哪些文件，避免冲突。

框架无关的功能

以下 Vite 功能在所有框架中工作方式相同：

功能	说明
环境变量	`import.meta.env` 始终可用
静态资源	`import img from './a.png'` 始终有效
CSS Modules	`.module.css` 在所有框架中渲染
Glob 导入	`import.meta.glob()` 框架无关
JSON 导入	`import data from './data.json'` 始终可用
路径别名	`resolve.alias` 在所有文件中有效
TypeScript	`.ts` / `.tsx` 文件始终支持

React

创建项目

核心插件

JSX + TS 配置

React Fast Refresh

常用搭配

Vue

创建项目

核心插件

Vue JSX/TSX

Vue SFC 特性

Auto Import（可选）

Svelte

SolidJS

原生 JS / TS

多框架共存（微前端）

框架无关的功能

推荐的项目目录结构

React 项目

Vue 项目