Vite 7 与现代前端构建基线
理解 Vite 如何利用原生 ESM 提供快速开发服务器，并通过生产构建生成可部署资源。
先用白话理解
它到底是什么？
写前端项目时，你需要一个工具帮你启动本地页面、处理模块、编译代码和打包资源。Vite 就是负责这部分工作的构建工具。
学习判断
现在适不适合学？
满足左侧情况可以开始；如果更符合右侧情况，先补基础通常更省时间。
- 已经会运行 npm 项目，想理解开发服务器和打包过程
- 正在学习 Vue 或 React，希望解决资源、环境变量和构建问题
- 需要把前端项目部署到静态服务器或 CDN
- 还没有学习 JavaScript 模块和 npm 基础
- 当前只在编写单文件 HTML/CSS 练习
- 还分不清浏览器环境与 Node.js 环境
学习前提
开始之前先会这些
- 会使用 npm 安装依赖和运行 scripts
- 了解 JavaScript 模块的 import 与 export
- 知道浏览器和 Node.js 是两个不同运行环境
核心概念
先抓住这三个重点
开发服务器
开发阶段按需提供模块，并通过热更新快速反映代码变化，不需要每次都完整打包。
生产构建
发布前会压缩代码、拆分资源并生成稳定文件，目标是让浏览器更快加载。
浏览器基线
构建目标决定最终代码需要兼容哪些浏览器。目标越现代，通常转换越少，但必须符合用户环境。
最小示例
创建并运行一个 Vite 项目
`dev` 用于本地开发，`build` 用于生成发布文件。不要直接把开发服务器当成生产部署方案。
Vite 7可以复制运行
npm create vite@latest my-app
cd my-app
npm install
npm run dev
npm run build动手练习
按这个顺序做一遍
不要只复制最小示例。下面三项能独立完成，说明你已经开始掌握这项技术。
- 01
创建一个 Vite 项目并修改开发端口
- 02
分别观察开发模式和 build 后的文件结构
- 03
添加一个环境变量并确认哪些值会暴露给浏览器
初学者常见误区
- 把 Vite 当成前端框架，它实际上主要负责开发与构建。
- 在客户端代码中使用只属于 Node.js 的模块。
- 没有区分开发环境变量和可暴露到浏览器的变量。
学完后的检查清单
- 能解释 npm run dev 与 npm run build 的区别
- 能找到 vite.config.ts 并理解常见配置入口
- 能定位静态资源路径和环境变量问题
官方资料