打包项目时图片未在 dist/assets/ 目录下的原因

问题描述

在打包一个 Vue 3 + Vite + TypeScript 项目时，我遇到了一个奇怪的问题：打包后的图片资源没有出现在 dist/assets/ 目录下，而是被内联到了 JavaScript 文件中。这导致 dist/assets/ 目录下找不到这些图片文件，从而影响了构建结果的预期。

查找原因

为了查找原因，我查阅了 Vite 的官方文档 Vite 配置文档，发现了一个与资源处理相关的重要配置项：build.assetsInlineLimit。

build.assetsInlineLimit 详解

• 类型: number
• 默认值: 4096 (即 4KB)
• 功能: 该配置项指定小于此阈值的资源文件（如图片、字体等）是否应内联到打包后的 JavaScript 文件中。默认情况下，所有小于 4KB 的资源文件会被内联为 base64 编码，以减少 HTTP 请求的数量。
• 禁用内联: 如果将该值设置为 0，则会完全禁用资源内联功能，所有资源文件将被放置在 dist/assets/ 目录下。

问题分析

在我的项目中，某些图片文件的大小刚好为 4KB，正好处于默认值的临界点。这导致这些图片被内联到了 JavaScript 文件中，而没有被放置在 dist/assets/ 目录下。

解决方案

为确保所有图片资源都位于 dist/assets/ 目录下，而不是被内联到 JavaScript 文件中，可以调整 Vite 配置中的 build.assetsInlineLimit。具体步骤如下：

1. 调整 build.assetsInlineLimit: 在 vite.config.ts 文件中，将 build.assetsInlineLimit 的值设置为 0，以禁用资源内联功能。例如：

   // vite.config.ts
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     build: {
       assetsInlineLimit: 0
     }
   });
   

2. 重新打包: 保存配置文件后，重新执行打包命令，检查 dist/assets/ 目录下是否正确生成了所有图片资源。

通过这些调整，你应该能够解决图片资源未在 dist/assets/ 目录下的问题，并确保构建结果符合预期。

---

希望这篇文章能够帮助你理解并解决在 Vite 打包过程中遇到的图片资源处理问题。如果有其他问题或需要进一步的帮助，请随时告知！