Vite 开发技能面向需要搭建或优化 Vite 项目的前端开发者，围绕现代 JavaScript/TypeScript 构建工具链提供配置参考与做法建议。资料中的核心原则是：利用原生 ES 模块加快开发速度，尽量沿用 Vite 的默认约定，只配置确实需要定制的部分，理解开发与构建阶段的差异，并同时兼顾开发速度与生产性能。
主要能力与配置内容包括：
项目配置：给出 vite.config.ts 中 defineConfig 的写法，包含插件、开发服务器端口与自动打开、构建输出目录与 sourcemap 等设置；还展示了通过 resolve.alias 与 new URL 设置 @、@components、@utils 等路径别名的方法。
环境变量：演示在 .env 中定义 VITE_ 前缀变量（如 VITE_API_URL、VITE_APP_TITLE），在代码中通过 import.meta.env 读取，并使用 import.meta.env.DEV、PROD、MODE 判断环境；同时给出 src/vite-env.d.ts 中引用 vite/client 类型并声明 ImportMetaEnv 的方式。
热模块替换：针对不支持 HMR 的库，展示使用 import.meta.hot.accept 接收更新模块、import.meta.hot.dispose 做替换前清理的手动 HMR 写法。
资源处理：说明以 URL 方式导入图片、以 ?raw 导入原始文本、以 ?worker 导入 Web Worker，以及 public 目录中文件按根路径直接提供访问的规则。
框架集成：列出 React（含 Babel 插件配置）、Vue、Svelte 三类官方/社区插件在 vite.config 中的接入示例。
构建优化：通过动态 import 和 manualChunks 做代码分割与分包，示例包含 vendor/utils 分组、按 node_modules 依赖划分 chunk，以及 chunkSizeWarningLimit 设置。
样式处理：CSS Modules 自动识别、postcss.config.js 中配置 Tailwind 与 autoprefixer、安装 sass 后直接导入 .scss 文件。
开发服务器代理：为 /api 配置 target、changeOrigin 与 rewrite 重写前缀，为 /socket.io 配置 ws 代理。
插件开发：给出自定义 Plugin 的结构，使用 config、transform、configureServer 等钩子修改配置、转换代码（如把 .md 转为模块导出）以及添加中间件。
测试与构建形态：给出 vitest.config.ts 中 globals、jsdom 环境、setupFiles 与 v8 覆盖率配置；展示 SSR 构建的 ssr、rollupOptions.input、ssr.external 与 noExternal 设置；展示库模式的 lib.entry、name、fileName 与 external、globals 配置。
最佳实践：使用 vite preview 在本地验证生产构建；让支持 ESM 的依赖保留在常规依赖中；用 optimizeDeps.include 处理 CommonJS 依赖；开启 build.sourcemap 便于调试生产问题；使用 server.warmup 加快开发服务器启动。
使用方式上，该内容以配置片段和代码示例为主，可直接作为项目配置与插件编写的参考，按需复制并调整为项目实际路径与依赖。
适用场景包括：新建或迁移 Vite 前端项目、配置开发代理与环境变量、接入 React/Vue/Svelte、优化生产构建分包体积、开发自定义 Vite 插件，以及搭建 Vitest 测试、SSR 或组件库构建。
限制方面，资料未提供该技能条目的具体安装命令、版本要求、许可协议、收费方式或效果数据，这些信息暂未提供；示例中的端口、代理目标、依赖名与路径均为演示值，需按实际项目替换。