在 VueJS 中存储图像的正确位置是什么 - 公共文件夹或资产文件夹？

Question

我已经使用Vue有一段时间了，我注意到我可以将项目图像存储在assets文件夹或public文件夹中。

要从assetsVue 中的文件夹访问图像，可以这样做:src="require('@/assets/images/myimage.jpg')"

要从publicVue 中的文件夹访问图像，可以这样做:src="./static/images/myimage.jpg"

存储 Vue 项目图像的正确位置是什么？

使用两者的含义是什么？

它们如何影响我的项目？

Answer 1

public 文件夹中的所有东西通常都会直接复制到您的 /dist 中。例如： favicon.ico 最终出现在您的 /dist 文件夹中，名称为... favicon.ico。

assets 文件夹通常是你放置你将在 vue 文件中导入的图像/视频/字体/svgs 等的地方。这些文件最终作为一个带有哈希名称的文件出现在您的 /dist 文件夹中：（例如：5j2i35j2o251hia.png）。

您未明确导入的 /assets 文件夹中的任何资产都不会最终出现在您的 /dist 文件夹中，以免使您的最终文件大小膨胀。

希望这可以帮助..

Answer 2

根据官方的 vue 文档，assets 文件夹中的所有内容都将由 Webpack 处理，而 public 文件夹中的所有内容都被简单地复制但不通过 Webpack：https ://cli.vuejs.org/guide/html-and -static-assets.html#static-assets-handling

因此，如果您想在构建期间利用 Webpacks 优化功能（这是您肯定想要的），请将它们放入资产中。我还将所有 img 都放在资产文件夹中，并且公共文件夹中只有与 pwa 相关的图像和图标。