在 vite 项目中，常用的插件包括 @vitejs/plugin-react、@vitejs/plugin-vue、@vitejs/plugin-legacy 和 vite-plugin-pwa。这些插件分别用于支持 react、vue、旧版浏览器兼容以及 pwa 功能。

@vitejs/plugin-react 如何配置 JSX 转换

@vitejs/plugin-react 通过 Babel 或 SWC 将 JSX 语法转换为 JavaScript。它默认使用 @babel/preset-react 进行转换，并自动处理 React Fast Refresh（热更新）。

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

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

预期结果：项目中的 .jsx 和 .tsx 文件会被正确编译，且组件修改后能即时刷新。

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

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。 术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

@vitejs/plugin-vue 如何处理单文件组件

@vitejs/plugin-vue 解析 .vue 文件，将其拆分为 script、template 和 style 部分，并分别处理。它支持 Vue 3 的 Composition API 和 SFC 特性。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

预期结果：.vue 文件被正确解析，模板编译为 render 函数，样式被提取或内联。

vite-plugin-pwa 如何生成 Service Worker

vite-plugin-pwa 自动生成 Service Worker 脚本，并提供缓存策略配置。它基于 workbox 库，简化了 PWA 的实现过程。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'robots.txt'],
    }),
  ],
});

预期结果：构建产物中包含 sw.js 和 manifest.json，浏览器可注册 Service Worker 实现离线访问。