NUXT- 资产和静态文件夹 - 何时使用哪个？

Question

作为对NUXT不太熟悉的人，我有些困惑assets和static文件夹之间的区别。

在文档中提到这些文件夹时，它说：

每个小于1 KB的文件都将作为base-64数据URL内联。否则，该图像/字体将被复制到相应的文件夹（在.nuxt目录下），并包含版本哈希的名称，以便更好地缓存。

还有：

如果不想使用来自assets目录的webpack Assets，可以创建并使用项目根目录中的static目录。

Nuxt会自动提供这些文件，并且可以在项目根目录URL中访问。

这种选项对于robots.txt、sitemap.xml或类似GitHub Pages的CNAME等文件非常有用。

如果我理解正确，则静态文件夹中的文件应该是它们的名称不应更改（即面向第三方用户），而在assets文件夹中，无论它们的名称是否更改，文件都可以在页面上使用。

为什么不把所有文件放在静态文件夹中呢？
robots.txt与robots.png之间有什么区别？
关于这些目录的最佳实践是什么？

谢谢。

- Randall Flagg

Answer 1

assets文件夹中的内容将被webpack处理，如果您使用CSS预处理器（如SASS，SCSS或Stylus），它将转换为通用CSS。或者您将图像放在该文件夹中，webpack也会针对生产进行优化。

至于static文件夹，它只是一个您可以放置所有静态资源的位置，例如背景图像或幻灯片。它不会被webpack处理。

- Jefry Dewangga

---

为什么我应该将背景图片放在静态文件夹而不是资产文件夹中？所有与 CSS 相关的资源都应该由 webpack 处理，对吗？ - Randall Flagg

并不是这样，您实际上可以同时使用“assets”和“static”。 - Jefry Dewangga

什么时候我希望它被触发，什么时候不希望？ - Randall Flagg

有时候你需要一些文件，这些文件不一定会直接用在网站里，比如PDF、大型下载资产、视频、音频等等。基本上是那些你不希望Webpack处理的东西。我的建议是...直接使用“assets”文件夹，除非你确实需要使用“static”文件夹。99%的情况下你不需要去修改“static”文件夹。 - Microcipcip

我还想了解一下如何最好地引用作为背景的图像，同时仍然让Webpack处理它。通常情况下，背景图像很大，使用imagemin或类似工具进行优化会更有益。 - TikaL13

一个使用 /static 而不是 /assets 的例子是，如果你正在使用 @nuxt/image，那么你必须将你的图片放在 static 文件夹中。 - Leopold Kristjansson

Answer 2

在关于这些文件夹的资产文档中，它说： assets目录包含未编译的资产，如Stylus或Sass文件、图像或字体。 注意：assets文件夹的内容将被webpack处理，如果您使用CSS的预处理器，如SASS、SCSS或Stylus，它将转换为通用的CSS。

在关于这些文件夹的静态文档中，它说： static目录直接映射到服务器根目录()，包含不太可能更改的文件。所有包含的文件将由Nuxt自动提供，并可通过您的项目根URL访问。

- Mohammadreza Khalili

Answer 3

在处理模板代码或CSS中引用的视频或背景图像时，始终使用Static文件夹，否则Nuxt将无法显示它们。如果您尝试引用视频的路径，例如用于视频背景，并且您将其放在Assets中，Nuxt将无法显示它。如果您将相同的视频放在Static中，并像这样引用它：{ myVideo: 'img/myvideo.mp4' }，那么Nuxt将显示它。

注意：您需要从路径中省略'static'，因此如果您有static/img/myvideo.mp4，应该始终引用为/img/myvideo.mp4

- keyboard-warrior