构建输出目录结构

构建完成后产物输出到 dist 目录，了解其结构有助于正确部署。

标准输出结构

dist/
├── index.html              # 入口 HTML
├── assets/
│   ├── index-abc123.js     # 入口 JS（哈希命名）
│   ├── index-def456.css    # 入口 CSS（哈希命名）
│   ├── vendor-789ghi.js    # 第三方依赖 chunk
│   ├── logo-xyz789.png     # 图片资源（哈希命名）
│   └── logo-abc123.woff2   # 字体资源
└── favicon.ico             # public 目录复制文件

目录说明

哈希命名规则

// 原文件
src/assets/logo.png

// 构建后
assets/logo-[hash].png

哈希值基于文件内容生成：

• 内容不变 → 哈希不变 → 缓存有效
• 内容变化 → 哈希变化 → 强制更新

HTML 资源引用

构建后 index.html 自动更新引用：

<!-- 构建前 -->
<script type="module" src="/src/main.js"></script>

<!-- 构建后 -->
<script type="module" src="/assets/index-abc123.js"></script>
<link rel="stylesheet" href="/assets/index-def456.css">

资源分类

注意：public 目录文件不添加哈希，保持原名。

配置输出结构

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'assets',     // 资源子目录名
    assetsInlineLimit: 4096  // 小于此值内联
  }
})

要点总结

• dist 是构建产物根目录
• assets 存放 JS/CSS/图片等
• 文件名哈希确保缓存正确
• public 文件保持原名