如何在vue@cli3项目中引用public目录中的静态资源文件？

本文共计687个文字，预计阅读时间需要3分钟。

作为图片最佳放置于 static 目录下，但 Vue CLI 3 没有static，网上都说放在 public 目录下。那问题来了，图片放置了，怎么使用、第一次尝试、是否可用相对路径？

首先，图片确实应该放在 public 目录下。这样无论你如何更改应用的结构，图片都可以通过相对路径直接访问。

图片使用方法：

1. 在你的 HTML 或组件文件中，你可以通过以下方式引入图片： 这里 `/path/to/image.jpg` 是图片相对于 public 目录的路径。

2. 在 Vue 组件中，可以使用 `require()` 函数： javascript

在这个例子中，`@` 符号通常被配置为指向 `src/` 目录。

第一次尝试：

1. 确保你的图片文件已经放置在 public 目录下。

2.在你的 HTML 或 Vue 组件中，按照上述方法引入图片。

3.在浏览器中查看你的网页或组件，确认图片是否显示。

是否可用相对路径：

是的，你可以使用相对路径来引用 public 目录下的图片。但要注意，如果更改了项目的目录结构，相对路径可能需要更新。使用绝对路径（即以 `/` 开头的路径）可以避免这个问题。