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:// 协议会导致浏览器找不到资源。
正确的访问方式
永远通过 Web 服务器访问应用：
- Next.js：
pnpm start - Vite：
pnpm preview
不要直接双击构建后的文件。
缓存问题
浏览器缓存
在 Production 模式或访问已部署的网站时，可能会遇到缓存导致的怪事。比如按钮改了颜色但刷新后没变化。
解决方法：
- 强制刷新：
Ctrl + Shift + R - 无痕模式打开
- 开发者工具 Network 选项卡勾选 "Disable cache"
构建缓存
如果强制刷新还不行，可能是构建缓存问题。删除 .next 目录后重新 pnpm build。
环境变量缓存
修改 .env 文件后必须重启服务（Ctrl+C 然后 pnpm dev），环境变量才会生效。因为环境变量在进程启动时加载，运行中修改文件不会自动更新。
本节核心要点
- ✅ Dev 模式用于日常开发，支持热重载
- ✅ Build 构建生产版本，优化性能
- ✅ Production 模式模拟正式环境
- ✅ package.json 管理脚本和依赖
- ✅ 不能直接双击打开构建产物
- ✅ 遇到问题先考虑缓存
- ✅ 修改环境变量必须重启服务
理解了代码运行的三种状态，接下来了解技术栈选择的决策框架。
相关内容
- 详见：4.1 技术栈决策框架