Vite 命令速查
共 23 条 Vite 常用命令与配置，覆盖常用命令、vite.config 配置、环境变量、插件与进阶 四组场景。支持搜索与分类筛选，点击即可复制。
常用命令
开发、构建与本地预览。
| 命令 / 配置 | 说明 |
|---|---|
| 用官方脚手架创建项目 | |
| 启动开发服务器（默认 5173，带热更新） | |
| 构建生产产物到 dist | |
| 本地预览构建产物（勿用于线上） | |
| 监听 0.0.0.0，便于局域网 / 手机访问 | |
| 指定端口 | |
| 构建时指定部署子路径 |
vite.config 配置
vite.config.ts 里常用的配置项。
| 命令 / 配置 | 说明 |
|---|---|
| 基础配置文件写法 | |
| 开发服务器端口与自动打开 | |
| 开发环境代理接口，解决跨域 | |
| 配置路径别名 | |
| 构建输出目录与产物选项 | |
| 手动分包，优化缓存 | |
| 预构建依赖，避免开发时懒发现 |
环境变量
仅 VITE_ 前缀的变量会暴露给前端。
| 命令 / 配置 | 说明 |
|---|---|
| 按环境加载不同变量文件 | |
| 只有 VITE_ 前缀的变量才会注入前端 | |
| 在代码中读取环境变量 | |
| 内置变量：当前模式 / 是否生产 / 是否开发 |
插件与进阶
常用官方插件与技巧。
| 命令 / 配置 | 说明 |
|---|---|
| 框架支持插件 | |
| 为老浏览器生成兼容产物 | |
| 可视化查看各插件对文件的转换过程 | |
| public 原样拷贝；import 会参与哈希与优化 | |
| 前端变量会打包进产物，密钥必须留在服务端 |
使用说明
Vite 常用命令与配置速查：开发 / 构建、vite.config 配置、环境变量与插件进阶；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：常用命令、vite.config 配置、环境变量、插件与进阶。
- 点「命令 / 配置」列复制，替换端口、路径与依赖名后使用。
- 开发期接口跨域用 server.proxy；部署到子路径用 build --base。
- 记住：只有 VITE_ 前缀的环境变量才会注入前端，密钥绝不能放前端。
常见问题
- Vite 和 Webpack 该选哪个？
- Vite 基于原生 ESM，开发启动与热更新极快，适合绝大多数现代项目；Webpack 生态与插件更成熟、配置更灵活，老项目与特殊构建需求仍常见。新项目优先 Vite。
- 开发时代理接口没生效？
- 检查 server.proxy 的键是否与你请求的前缀一致（如 /api），并注意代理只在开发服务器生效；生产环境应由 Nginx 或网关做转发。
- 环境变量为什么在代码里是 undefined？
- 大概率忘了 VITE_ 前缀（Vite 只暴露 VITE_ 开头的变量），或改完 .env 没重启开发服务器。生产环境还需把变量在构建时提供。
- 打包体积太大怎么办？
- 用 rollupOptions 手动分包（把稳定的大依赖单独成 chunk 利于缓存），并检查是否把整个库引入了却没按需加载。