Vite 中如何处理静态资源？

推荐答案

在 Vite 中处理静态资源非常简单，Vite 提供了内置的静态资源处理机制。你可以通过以下方式处理静态资源：

1. 直接导入：你可以直接在 JavaScript 或 Vue 文件中导入静态资源，Vite 会自动处理这些资源并生成正确的 URL。

   import imgUrl from './assets/image.png'

2. 使用 public 目录：将静态资源放在 public 目录下，这些资源会被直接复制到构建输出的根目录中，并且可以通过根路径直接访问。

   public/
     favicon.ico
     logo.png

   在 HTML 中引用：

   <img src="/logo.png" alt="Logo">

3. 使用 import.meta.glob：如果你需要批量导入静态资源，可以使用 import.meta.glob。

   const images = import.meta.glob('./assets/*.png')

本题详细解读

1. 直接导入静态资源

Vite 支持直接导入静态资源，如图片、字体、JSON 文件等。当你导入这些资源时，Vite 会生成一个基于文件内容的哈希 URL，并将资源放置在构建输出的 assets 目录中。

import imgUrl from './assets/image.png'

document.getElementById('img').src = imgUrl

这种方式的好处是，Vite 会自动处理资源的缓存和版本控制，确保资源在更新时能够正确加载。

2. 使用 public 目录

public 目录是一个特殊的目录，Vite 不会对该目录中的文件进行任何处理，而是直接将它们复制到构建输出的根目录中。这意味着你可以通过根路径直接访问这些资源。

例如，如果你在 public 目录中放置了一个 logo.png 文件，你可以通过 /logo.png 路径在 HTML 或 JavaScript 中引用它。

<img src="/logo.png" alt="Logo">

这种方式适用于那些不需要经过构建处理的静态资源，比如 favicon、robots.txt 等。

3. 使用 import.meta.glob

import.meta.glob 是 Vite 提供的一个功能，允许你批量导入模块或静态资源。这对于需要动态加载大量资源的场景非常有用。

const images = import.meta.glob('./assets/*.png')

for (const path in images) {
  images[path]().then((module) => {
    console.log(module.default)
  })
}

在这个例子中，import.meta.glob 会匹配 ./assets 目录下的所有 .png 文件，并返回一个对象，其中键是文件路径，值是一个返回模块的 Promise。

4. 其他注意事项

• 资源大小限制：Vite 默认会将小于 4KB 的资源内联为 base64 编码的 Data URL。你可以通过 build.assetsInlineLimit 配置项来调整这个限制。

• 自定义资源处理：如果你需要对某些资源进行自定义处理，可以使用 Vite 的插件系统。例如，使用 vite-plugin-svg 来处理 SVG 文件。

通过这些方法，你可以在 Vite 中高效地处理静态资源，确保它们在开发和构建过程中能够正确加载和使用。