如何在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 目录下的图片。但要注意，如果更改了项目的目录结构，相对路径可能需要更新。使用绝对路径（即以 `/` 开头的路径）可以避免这个问题。

作为图片最好放在static目录下，但是vue@cli3没有static，网上都说放在public目录下，行，那就放吧，可问题是图片放了怎么使用

第一次尝试

肯定用绝对路径这就不说了，用相对路径，webpack会解析成base64，可是绝对路径怎么输都不对，咋回事

后面看网上说把前面路径下的public路径去掉，好，开发环境没问题了，可打包报错怎么办，就这个我研究了好久。

解决问题

网上一大堆牛头不对马嘴的，我也是无语了
最后的最后，终于官网找到了完美的解决方案

如此设置，完美解决问题，如果你留心观察过，你会发现，index.html文件的ico图标就已经这么使用了

<template> <div class="er"> <el-scrollbar style="height:100%"> <div class="ds"> <img class="sdde" :src='`${publicPath}imges/but_play.png`' > </div> </el-scrollbar> </div> </template> <script> export default { data() { return { publicPath: process.env.BASE_URL } }, components: { } } </script>

到此这篇关于vue@cli3项目模板怎么使用public目录下的静态文件的文章就介绍到这了,更多相关vue@cli3 public静态文件内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！