---
title: "4.0 代码运行的三种状态"
description: "理解 Dev、Build、Production 三种运行模式"
chapter: "第四章"
priority: "🟢"
---
# 4.0 代码运行的三种状态 🟢
> **阅读完本节后，你将会收获：**
> - 理解代码的三种运行模式
> - 掌握 package.json 的作用
> - 了解热重载和缓存机制
> - 避免常见的运行环境错误
> 代码有三种"生命状态"：Dev（开发）、Build（构建）、Production（生产）。理解它们的区别，是避免"改了代码没效果"这类困惑的关键。
---
## 三种状态
### Dev（开发模式）
`pnpm dev` 启动的就是开发模式。它就像是**打草稿**：
- 保存代码后浏览器自动更新
- 支持热重载，表单内容不会丢失
- 包含详细的报错信息，方便调试
- 运行速度较慢
**适用场景**：日常开发调试
### Build（构建模式）
`pnpm build` 执行构建。这个过程就像是**把草稿排版印刷成书**：
- 压缩代码体积
- 优化运行速度
- 生成 `.next` 或 `dist` 文件夹
- 去除调试信息
**适用场景**：准备上线前
### Production（生产模式）
`pnpm start`（或 `next start`）运行构建后的版本。这是在本地**模拟正式上线环境**：
- 运行构建后的代码
- 性能最优
- 没有热重载
**适用场景**：上线前最后检查
```mermaid
graph LR
A[编写代码] --> B[Dev 模式
pnpm dev]
B --> C[Build 构建
pnpm build]
C --> D[Production 模式
pnpm start]
D --> E[部署到服务器]
style B fill:#e1f5fe
style C fill:#fff3e0
style D fill:#e8f5e9
```
---
## 热重载
在 Dev 模式下，保存文件后浏览器会自动更新。这叫**热重载（Hot Reload）**。
开发工具在后台监听文件变化，检测到修改后自动刷新浏览器或只更新改动的部分。这让你不需要每次手动刷新。
但在 Build 或 Production 模式下，代码已经打包，没有监听机制，修改后需要重新构建。
---
## package.json
**为什么输入 `pnpm dev` 就能启动项目？**
打开根目录的 `package.json`，这是 Node.js 项目的**核心配置文件**：
### Scripts（脚本）
定义了项目常用的运行命令：
```json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
```
当输入 `pnpm dev` 时，包管理器会查表，发现它对应的是 `next dev` 命令并执行。
你也可以自定义命令，比如修改端口避开拥挤的 3000：
```json
{
"dev": "next dev -p 4000"
}
```
### Dependencies（依赖）
记录项目需要的第三方库及版本号：
```json
{
"dependencies": {
"next": "^16.0.0",
"react": "^19.0.0",
"drizzle-orm": "^0.36.0"
}
}
```
这确保其他人通过 `pnpm install` 安装一模一样的库，完美还原开发环境。
---
## 构建产物
构建完成后，会在 `.next`（Next.js）或 `dist`（Vite）文件夹生成产物。
但你不能直接双击打开这些文件。Next.js 本质上是运行在 Node.js 上的**程序**，需要服务器环境支持——连接数据库、处理 API 请求、服务端渲染页面。
即使纯静态项目（Vite 打包），通常也不能直接双击打开。现代应用使用**绝对路径**引用资源，双击打开使用 **file:// 协议**会导致浏览器找不到资源。
::: tip 正确的访问方式
永远通过 Web 服务器访问应用：
- Next.js：`pnpm start`
- Vite：`pnpm preview`
不要直接双击构建后的文件。
:::
---
## 缓存问题
### 浏览器缓存
在 Production 模式或访问已部署的网站时，可能会遇到缓存导致的怪事。比如按钮改了颜色但刷新后没变化。
**解决方法**：
- 强制刷新：`Ctrl + Shift + R`
- 无痕模式打开
- 开发者工具 Network 选项卡勾选 "Disable cache"
### 构建缓存
如果强制刷新还不行，可能是构建缓存问题。删除 `.next` 目录后重新 `pnpm build`。
### 环境变量缓存
环境变量是存放在代码之外的配置信息——就像手机的"设置"：应用本身不变，但你可以通过设置调整它的行为（深色模式、语言偏好等）。在开发中，环境变量通常存放在 `.env` 文件里，程序启动时读取。
修改 `.env` 文件后**必须重启服务**（Ctrl+C 然后 `pnpm dev`），环境变量才会生效。因为环境变量在进程启动时加载，运行中修改文件不会自动更新。
---
## 本节核心要点
- ✅ Dev 模式用于日常开发，支持热重载
- ✅ Build 构建生产版本，优化性能
- ✅ Production 模式模拟正式环境
- ✅ package.json 管理脚本和依赖
- ✅ 不能直接双击打开构建产物
- ✅ 遇到问题先考虑缓存
- ✅ 修改环境变量必须重启服务
理解了代码运行的三种状态，接下来了解技术栈选择的决策框架。
---
## 相关内容
- 详见：[4.1 技术栈决策框架](./01-tech-stack-decision.md)