SuperAPI AI 工具集

vite

通用与其它

查看项目

更新于 10-16 00:29

技能介绍

用途:Vite 是新一代前端构建工具,提供即时启动的开发服务器与优化的生产构建,用于搭建和构建 Web 应用。

主要能力:支持项目脚手架与多种模板(react、react-ts、vue、vue-ts、svelte、svelte-ts 等);通过 vite.config.ts 配置开发服务器(端口、host、open、proxy)、构建输出(outDir、sourcemap、minify、manualChunks)、预览服务器、全局常量 define、CSS 选项与路径别名 resolve.alias。

环境变量:.env、.env.local、.env.[mode]、.env.[mode].local 按模式加载;仅 VITE_ 前缀变量暴露给客户端,通过 import.meta.env 访问,并可用 env.d.ts 声明类型。

插件与扩展:React、React SWC、vite-plugin-svgr、vite-plugin-pwa、vite-plugin-compression 等;支持 CSS Modules、PostCSS、Sass,以及静态资源导入(URL、?inline、?raw)和 public 目录。

构建优化:代码分割、manualChunks、chunkSizeWarningLimit、rollup-plugin-visualizer 分析包体积;支持库模式(build.lib)与 vite-plugin-dts。

测试:与 Vitest 集成,可在 vite.config.ts 中配置 test(globals、environment、setupFiles)。

使用方式:npm create vite@latest my-app 创建项目,npm install 安装依赖,npm run dev 启动开发服务器,vite build 构建,vite preview 预览;也可用 --template 指定模板,或 vite build --mode staging 按模式构建。

适用场景:Web 应用与组件库的脚手架、开发、构建和测试。

限制:资料未提供具体收费、平台或效果数据;实际配置与兼容性需参考官方文档。