NUXT-资产和静态文件夹——啥时候用哪个？

Posted 2023-02-22

【中文标题】NUXT-资产和静态文件夹——啥时候用哪个？

【英文标题】：NUXT- assets and static folder - when to use which?NUXT-资产和静态文件夹——什么时候用哪个？

【发布时间】：2018-07-26 06:22:16

【问题描述】：

作为 NUXT 的新手，我对资产和静态文件夹之间的区别有点困惑。

在documentation 中关于这个文件夹说：

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

还有：

如果您不想使用资产目录中的 webpacked 资产， 您可以在项目根目录中创建和使用静态目录 目录。

这些文件将由 Nuxt 自动提供并可在 您的项目根 URL。

此选项对 robots.txt、sitemap.xml 或 CNAME 等文件很有帮助 （例如 GitHub Pages）。

如果我理解正确，静态文件夹中的文件应该是其名称不应更改的文件（即对于第 3 方消费者）和资产文件夹中的文件，我不在乎其名称是否更改（例如文件我在我的页面上使用）。

为什么不将所有文件都放在静态文件夹中，仅此而已？ robots.txt 和 robots.png 有什么区别？ 关于这些目录的最佳做法是什么？

谢谢

【参考方案1】：

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

对于static 文件夹，它只是一个可以放置所有静态资源的地方，例如背景图像或滑块。它从未被 webpack 碰过。

【讨论】：

为什么我要将背景图片放在静态文件夹中而不是资产中？所有与 CSS 相关的资源都应该被 webpack 触及。没有？

不是真的，您实际上可以同时使用assets 和static。

我什么时候想要它被触摸，什么时候不想要？

@RandallFlagg 有时您需要拥有不一定直接在网站中使用的文件，例如要下载的 PDF 或大型资产、视频、音频等。基本上是您不希望 Webpack 使用的东西过程。我的建议是....只需使用资产，直到您发现需要使用静态文件夹。 99% 的时间您都不需要触摸静态文件夹。

我还想了解引用用作背景但仍由 Webpack 处理的图像的最佳方法。通常，背景图像很大，并且可以通过 imagemin 或类似的工具对其进行优化。