Vite 通过 create-vite 命令实现开箱即用的快速初始化，支持模板选择、HMR 热更新、环境变量注入及轻量构建优化。
直接用 create-vite 命令就能秒建环境，不用配置、不装全局工具、不手动写配置文件——Vite 的设计哲学就是“开箱即用”。关键在于选对模板、装对依赖、启动即可见。
快速初始化纯 JavaScript 项目
终端里一行命令完成创建：
- 运行
npm create vite@latest my-app -- --template vanilla - 进入目录：
cd my-app - 安装依赖：
npm install（推荐用pnpm install，更快更省磁盘） - 启动开发服务器：
npm run dev
浏览器打开 https://www.php.cn/link/2d16ef569bb8d2fddf2e9b279f73e7f8，页面立刻渲染，修改 src/main.js 或 index.html，保存后浏览器自动局部刷新（HMR），全程无等待。
合理配置 vite.config.js 提升开发体验
项目根目录新建或编辑 vite.config.js，常见实用配置包括：
立即学习“Java免费学习笔记（深入）”；
-
端口与自动打开：设
server.port避免端口冲突，server.open: true启动即弹浏览器 -
路径别名：用
resolve.alias把@/utils指向src/utils，告别../../../嵌套 -
静态资源处理：
public/下的文件（如favicon.ico、robots.txt）会原样复制到构建输出根目录，无需 import
示例最小可用配置：
import { defineConfig } from 'vite'
<p>export default defineConfig({
server: {
port: 3000,
open: true
},
resolve: {
alias: {
'@': '/src'
}
}
})环境变量按需注入，避免硬编码
Vite 原生支持 .env 文件，但只认以 VITE_ 开头的变量：
- 新建
.env.development：写入VITE_API_BASE_URL=http://localhost:8080 - 新建
.env.production：写入VITE_API_BASE_URL=https://api.example.com - 代码中读取：
fetch(import.meta.env.VITE_API_BASE_URL + '/users')
构建时 Vite 自动根据 mode（默认 development / production）加载对应文件，变量在构建时被静态替换，不会泄露到客户端。
生产构建前做轻量优化
运行 npm run build 默认使用 Rollup 打包，输出到 dist/。几个低成本高回报的优化点：
-
启用压缩：确保
build.minify为'terser'（默认已开启） - 拆分 vendor 包：把 React/Vue 等大依赖单独打包，利于浏览器长期缓存
-
控制 chunk 大小警告：设
build.chunkSizeWarningLimit: 500，超 500KB 时提示，便于发现过大模块
这些配置加在 vite.config.js 的 build 字段下即可，不需要额外插件。
