Vite 如何与 Vue、React 等框架集成？

Vite 支持多种前端框架，包括 Vue、React、Svelte、Solid 等。以下是 Vite 与不同框架的集成方法：

Vue 集成：

1. 创建 Vue 项目：

bash
npm create vite@latest my-vue-app -- --template vue

1. 配置文件：

javascript
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

1. 支持 JSX：

javascript
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [vue(), vueJsx()]
})

React 集成：

1. 创建 React 项目：

bash
npm create vite@latest my-react-app -- --template react

1. 配置文件：

javascript
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

1. Fast Refresh：Vite 的 React 插件自动支持 Fast Refresh

Svelte 集成：

1. 创建 Svelte 项目：

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

1. 配置文件：

javascript
// vite.config.js
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

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

Solid 集成：

1. 创建 Solid 项目：

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

1. 配置文件：

javascript
// vite.config.js
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

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

通用配置：

路径别名：

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

环境变量：

javascript
export default defineConfig(({ mode }) => {
  return {
    define: {
      __APP_ENV__: JSON.stringify(mode)
    }
  }
})

CSS 预处理器：

javascript
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
})

最佳实践：

1. 使用官方模板创建项目，确保最佳配置
2. 根据框架特性选择合适的插件
3. 合理配置路径别名，简化导入
4. 利用环境变量管理不同环境配置
5. 使用框架特定的优化插件

框架特定优化：

• Vue：使用 @vitejs/plugin-vue 的 script 选项优化
• React：配置 @vitejs/plugin-react 的 jsxImportSource
• Svelte：配置 @sveltejs/vite-plugin-svelte 的 preprocess
• Solid：使用 vite-plugin-solid 的 solid 选项