我用的脚手架到底是什么——Vite 主要功能

项目跑起来之后，我一直没搞明白 npm run dev 背后 Vite 到底干了什么。这次专门把它的几个核心功能拆开看一遍。

一、先看一眼项目长什么样

json 复制代码

// package.json
{
  "name": "qwen-image-demo",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "vite": "^6.0.0"
  }
}

整个项目的依赖里只有 Vite 自己 ，没有 webpack、没有 babel，配置文件也几乎是空的。但项目能跑、能热更新、能打包------这就是我想搞懂的地方：Vite 一个人是怎么把所有这些事都做了的。

二、功能一：开发服务器，快到夸张

arduino 复制代码

npm run dev

跑完这一行，终端几乎瞬间就给我一个本地地址，打开浏览器页面已经在那了。

我去查了原理才明白为什么这么快： 以前的工具（比如 webpack）在开发时，会把你写的所有模块提前打包成一个或几个大文件，项目越大，启动越慢。Vite 反过来想：浏览器本来就支持 <script type="module">，能自己按需加载模块，那不如不打包，直接把源码丢给浏览器，浏览器请求哪个模块，Vite 才处理哪个模块。

这也是为什么我的 index.html 里这样写：

xml 复制代码

<body>
  <div id="app"></div>
  <!-- esm 脚手架 手动启动esm -->
  <script type="module" src="/src/main.js"></script>
</body>

type="module" 这一行就是关键------告诉浏览器"这是 ESM 模块，你自己按需去加载吧"。

三、功能二：热更新（HMR），改代码不刷新页面

我改了一行 CSS，保存的瞬间，页面样式直接变了，没有刷新、没有白屏、之前点开的状态也没丢 。这个功能叫 HMR（Hot Module Replacement，模块热替换） 。

我的理解： 普通刷新是"页面从头加载一遍"，状态全部重置；HMR 是"只把改动的那个模块换掉"，其他部分纹丝不动。对开发体验来说差距巨大------尤其是表单填了一半、调试到某个状态时，不用每次都重新操作一遍。

四、功能三：生产构建（build），把开发代码"打包"成能上线的东西

开发时不打包很快，但直接把没打包的源码扔给真实用户是不行的------文件太碎、请求太多、没压缩。所以上线前要跑这条命令：

arduino 复制代码

npm run build

这一步 Vite 才会真正去做"打包"这件事：

把零散的模块合并成少量文件，减少浏览器请求次数
压缩代码体积（去空格、改短变量名）
给文件名加哈希值（方便做缓存）
Tree-shaking：把项目里没用到的代码自动删掉

打包完用这条命令本地预览一下效果：

arduino 复制代码

npm run preview

我的理解： 这就是为什么 scripts 里要分 dev / build / preview 三个命令------开发、构建、预览构建结果，是三个不同阶段，各自调用 Vite 不同的能力。

五、功能四：环境变量管理

Vite 还负责处理 .env 文件，让我可以把敏感信息（比如 apiKey）从代码里抽出来：

ini 复制代码

# .env.local
VITE_QWEN_API_KEY=sk-xxxxxxxxxxxxxxxx

arduino 复制代码

// main.js
const key = import.meta.env.VITE_QWEN_API_KEY;

注意： 必须以 VITE_ 开头，Vite 才会把这个变量注入给客户端代码------这是它故意设计的一道安全门槛，没有这个前缀的变量会被直接忽略，不会打包进最终产物。

六、功能五：开箱即用，少配置

我这个项目几乎没写任何 Vite 配置文件，但下面这些东西都直接能用：

arduino 复制代码

✅ ESM 模块语法（import/export）
✅ TypeScript（不用额外装 ts-loader 之类的东西）
✅ CSS / CSS 预处理器（装个 sass 包就能直接 import .scss）
✅ 静态资源（图片、字体直接 import 就能拿到路径）
✅ JSX / Vue 单文件组件（装对应插件即可）

我的理解： 以前用 webpack，光是让 TypeScript、CSS、图片这些东西能正常工作，就要装一堆 loader、写一堆配置。Vite 把这些"常见需求"提前内置好了，新手项目几乎是"装完就能跑"。

七、Vite 在我项目里的完整工作流程

arduino 复制代码

我执行 npm run dev
   ↓
Vite 启动开发服务器（不打包，按需编译）
   ↓
浏览器请求 index.html → 请求 main.js → 按需请求各个模块
   ↓
同时，Vite 读取 .env.local，把 VITE_ 开头的变量注入 import.meta.env
   ↓
我改代码 → HMR 只替换改动的模块，页面不刷新
   ↓
开发完成，npm run build → 打包压缩、tree-shaking、生成 dist 目录
   ↓
npm run preview → 本地验证打包结果，确认没问题再上线

八、总结：Vite 到底解决了什么

开发体验：不预先打包，靠浏览器原生 ESM 按需加载，启动和热更新都飞快。
生产可用性 ：开发时图快，上线时靠 build 命令打包压缩，两套模式自动切换，我不用关心底层细节。
配置极简：常见的 TS、CSS、静态资源处理都内置好了，不用从零搭一套 webpack 配置。
环境变量安全门槛 ：.env + VITE_ 前缀机制，让我能把敏感信息从硬编码里抽出来管理。

我对 Vite 的理解：它是前端项目里负责"工程化"这一块的大管家，从开发服务器、热更新到打包构建、环境变量，全部一个人接管，让我能专心写业务代码本身。