Vue 项目执行打包命令后，产物目录中会包含哪些类型的文件？请说明它们各自的作用。
考察说明
考查对 Vue 构建产物构成及用途的理解。
回答思路
- 【回答框架 1】Vue 项目打包后，dist 目录下主要生成 HTML、JavaScript、CSS 和静态资源文件。HTML 文件是入口页面，通常为 index.html，它引用了打包后的 JS 和 CSS 文件。
- 【回答框架 2】JavaScript 文件是核心产物，包括应用逻辑、组件代码和第三方库。Vue CLI 默认会按代码分割生成多个 JS 文件，如 app.js、vendor.js 和按路由懒加载的 chunk 文件。
- 【回答框架 3】CSS 文件包含全局样式和组件样式，可能被提取为独立文件，如 app.css，用于减少运行时样式注入。
- 【回答框架 4】静态资源如图片、字体等会被复制到 assets 目录，并根据配置进行哈希命名，以便缓存管理。
- 【回答框架 5】此外，可能生成 source map 文件（如 .js.map），用于调试，但生产环境通常关闭或仅用于错误监控。
- 【关键点 1】dist 目录包含 index.html、JS、CSS 和静态资源文件。
- 【关键点 2】JS 文件按代码分割，包括入口、vendor 和懒加载 chunk。
- 【关键点 3】CSS 被提取为独立文件，静态资源带哈希命名。
- 【关键点 4】生产环境默认不生成 source map，除非显式配置。
- 【易错点 1】不要混淆开发模式下的内存文件与打包产物。
- 【易错点 2】不要认为所有 JS 都合并为一个文件，实际存在代码分割。
- 【易错点 3】静态资源路径需注意 base 配置，否则部署后可能 404。