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）运行构建后的版本。这是在本地模拟正式上线环境：

• 运行构建后的代码
• 性能最优
• 没有热重载

适用场景：上线前最后检查

热重载

在 Dev 模式下，保存文件后浏览器会自动更新。这叫热重载（Hot Reload）。

开发工具在后台监听文件变化，检测到修改后自动刷新浏览器或只更新改动的部分。这让你不需要每次手动刷新。

但在 Build 或 Production 模式下，代码已经打包，没有监听机制，修改后需要重新构建。

package.json

为什么输入 pnpm dev 就能启动项目？

打开根目录的 package.json，这是 Node.js 项目的核心配置文件：

Scripts（脚本）

定义了项目常用的运行命令：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}
​

当输入 pnpm dev 时，包管理器会查表，发现它对应的是 next dev 命令并执行。

你也可以自定义命令，比如修改端口避开拥挤的 3000：

{
  "dev": "next dev -p 4000"
}
​

Dependencies（依赖）

记录项目需要的第三方库及版本号：

{
  "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 技术栈决策框架