从零配置开发与生产构建

本阶段目标

理解开发服务器与生产构建是两条目标不同的链路，并能从入口追踪到最终 HTML、JavaScript、CSS 和静态资源。

为项目加入以下内容：

然后执行：

pnpm dev
pnpm build
pnpm preview

在浏览器 Network 面板和 dist/ 中比较两种模式。开发阶段强调快速转换和热更新，生产阶段强调可部署产物、内容哈希、代码分块和缓存。

index.html
  → src/main.ts
  → App.vue
  → features/tasks/*
  → CSS、图片与动态模块
  → 带内容哈希的生产产物

不要只截图 dist/。应记录每个产物由哪个入口或动态边界产生，以及修改源码后哪些文件哈希发生变化。

所有进入客户端产物的值都对用户可见。将一个明显的占位值写入 VITE_API_BASE_URL，构建后在产物中搜索它，亲自验证环境变量不是秘密存储。

为环境变量增加类型声明和启动时校验，缺失时应尽早失败，而不是等到首次请求才暴露问题。