Nuxt 3 是如何管理静态资源的？

本文最初发布于 Mastering Nuxt 博客。

Nuxt 3为我们在Web应用程序中管理所有资产提供了两个很好的选择。

但是它们之间有什么区别，你又如何知道该使用哪个呢？

简短回答是：默认情况下，请使用 ~/assets，只有在绝对必要时才使用 ~/public。

在本文中，我将分享一些简单的问题，可以帮助你确定将资产放在哪里，以及这两种策略之间的区别。

处理资产的两种方式

你的应用程序中不仅仅包含代码，还有许多非代码资产：

• images (图片)
• icons (图标)
• fonts (字体)
• audio files (音频文件)
• stylesheets (样式表，是的，从技术上讲它是代码，但它不是JavaScript）)
• 等等

在任何 Web 应用程序中，包括使用Nuxt，我们有两种主要处理这些非代码资产的方式：

1. 通过我们的打包工具对它们进行处理。
2. 将它们保持原样。

虽然这两种方式都是处理资产的方法，但第一种方法使用 ~/assets 文件夹，而第二种方法使用 ~/public 文件夹。

是的，这种命名有点令人困惑，但它是广大Web开发社区长期以来使用的惯例，所以我们只能接受它。

如何进行选择呢？

有三个主要问题需要考虑：

1. 这个资产是否需要进行处理？
2. 这个资产是否经常变动或根本不变？
3. 它是否需要特定的文件名？

1. 这个资产是否需要进行处理？

第一个问题大部分是显而易见的。

如果你有一堆图片，你可能希望在将它们与你的Web应用程序一起发布之前对这些图片进行压缩和优化。另一方面，网站地图就不需要额外处理，它本身就是很好的。

2. 这个资产是否经常变动或根本不变？

最后两个问题影响着这个资产将如何被缓存。我们的代码经常变动，所以我们希望将其包含在我们的代码包中。这是因为我们的打包工具会根据内容的哈希值每次更改时为我们的代码包命名一个唯一的名称。（我们也希望对代码进行处理，但我们暂且忽略这个问题。）这意味着浏览器将被迫始终拥有我们代码的最新版本。

3. 它是否需要特定的文件名？

网页爬虫将专门寻找名为 robots.txt 的文件，因此我们需要保留该文件名。但对于大多数其他资产来说，文件名并不那么重要。

让我们更详细地了解一下这两种方法之间的区别。

公共目录

将任何文件放入 ~/public 目录中，它们将直接包含在Nuxt应用程序的构建输出中。它们不会以任何方式进行修改。

该公共目录在您的应用程序的根目录提供服务。这意味着如果您的 ~/public 文件夹看起来像这样：

public/
- cats.png
- songs/
  - dubstep.wav
  - chopin.mp3

您可以直接从浏览器访问这些文件：

yourwebsite.com/cats.png
yourwebsite.com/songs/dubstep.wav
yourwebsite.com/songs/chopin.mp3

记住，这些文件不会被修改。~/public 目录的内容会直接复制到dist文件夹中。

这些是我们通常放置在 ~/public 文件夹中的常见内容：

• robots.txt
• favicon
• sitemaps

但通常情况下，我们会将大部分内容保留为资产（assets）。

资产目录

应用程序中的所有代码都会被打包工具处理。在Nuxt 3中，默认情况下使用的是Vite。

打包工具会从 app.vue 开始，引入其所有的依赖项，然后引入它们的依赖项，以此类推，直到应用程序中的所有代码都被处理。

这将成为您可以用来部署应用程序的打包输出。

如果您在组件中导入的内容不仅限于"代码"，打包工具仍然必须包括这些文件。否则，它们将无法与您的其他代码一起部署：

import screen1 from '~/assets/images/screen1.png';
import screen2 from '~/assets/images/screen2.png';
import screen3 from '~/assets/images/screen3.png';

import from '~/assets/styles/radStyleSheet.css';

当您这样做时，打包工具会执行以下几个步骤：

1. 使用任何配置的插件处理文件。
2. 生成带有文件哈希值的打包文件的名称（如前面提到的缓存目的）。
3. 替换导入语句为新的文件名，以便在部署时打包的代码能够找到该文件。

实际上，您将这些图像或样式表放在哪里并不重要。但我们必须将所有这些其他资产放在某个地方以保持组织有序，因此通常按照约定使用 ~/assets 目录。

像这样直接导入资产的一个附加好处是，如果有任何缺失，您将会收到构建错误。如果您引用 ~/public 文件夹中的内容，那么就不会发生这种情况，因为它根本不会被处理。

大多数情况下，大部分资产通常会被打包工具处理，所以您通常会在 ~/assets 文件夹中找到以下内容：

• images (图片)
• icons (图标)
• fonts (字体)
• stylesheets (样式表)

原文链接