面试题：Vue 打包后最终生成的文件有哪些？

在 Vue 项目中，打包后生成的文件主要包括以下几种类型。这些文件是由构建工具（如 Webpack 或 Vite）根据项目配置和代码分割策略生成的。

1. 打包后生成的主要文件

1.1 HTML 文件

文件名：通常是 index.html。
作用：应用的入口文件，包含对 JavaScript 和 CSS 文件的引用。
位置：默认在 dist 目录下。

1.2 JavaScript 文件

文件名：
- 主文件：app.[hash].js（包含应用的业务逻辑）。
- 依赖文件：vendor.[hash].js（包含第三方库，如 Vue、Vuex、Vue Router 等）。
- 异步加载文件：[name].[hash].js（通过动态导入生成的代码分割文件）。
作用：包含应用的 JavaScript 代码。
位置：默认在 dist/js 或 dist/assets 目录下。

1.3 CSS 文件

文件名：
- 主文件：app.[hash].css（包含应用的全局样式）。
- 组件样式文件：[name].[hash].css（通过 CSS 提取插件生成的样式文件）。
作用：包含应用的样式代码。
位置：默认在 dist/css 或 dist/assets 目录下。

1.4 静态资源文件

文件名：
- 图片：[name].[hash].[ext]（如 logo.[hash].png）。
- 字体：[name].[hash].[ext]（如 font.[hash].woff2）。
作用：包含项目中使用的图片、字体等静态资源。
位置：默认在 dist/img、dist/fonts 或 dist/assets 目录下。

1.5 Source Map 文件

文件名：[name].[hash].js.map 或 [name].[hash].css.map。
作用：用于调试打包后的代码，映射回源代码。
位置：默认在 dist/js 或 dist/css 目录下。

1.6 其他文件

文件名：
- favicon.ico：网站图标。
- manifest.json：PWA 应用的配置文件。
- robots.txt：搜索引擎爬虫配置文件。
作用：用于增强应用的功能或 SEO。
位置：默认在 dist 目录下。

2. 文件生成规则

打包后文件的命名和生成规则由构建工具的配置决定。以下是一些常见的配置项：

2.1 文件名哈希

文件名中的 [hash] 是根据文件内容生成的唯一哈希值，用于缓存控制。
示例：
- app.abc123.js
- vendor.def456.css

2.2 代码分割

通过动态导入（import()）或配置 splitChunks（Webpack）实现代码分割。
示例：
- home.abc123.js
- about.def456.js

2.3 静态资源路径

静态资源的路径可以通过 publicPath 配置。
示例：
- https://cdn.example.com/assets/logo.abc123.png

3. 打包配置示例

以下是 Vue CLI 和 Vite 的打包配置示例：

3.1 Vue CLI（基于 Webpack）

// vue.config.js
module.exports = {
  outputDir: 'dist', // 打包输出目录
  assetsDir: 'assets', // 静态资源目录
  filenameHashing: true, // 开启文件名哈希
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // 代码分割
      },
    },
  },
};

3.2 Vite

// vite.config.js
export default {
  build: {
    outDir: 'dist', // 打包输出目录
    assetsDir: 'assets', // 静态资源目录
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name].[hash].js', // 代码分割文件命名规则
        entryFileNames: 'js/[name].[hash].js', // 入口文件命名规则
        assetFileNames: 'assets/[name].[hash].[ext]', // 静态资源命名规则
      },
    },
  },
};