vue-cli3访问public文件夹静态资源报错如何彻底解决？

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

今天在项目中使用了public文件夹中的静态资源，本地测试没问题，但部署到fat服务器后报404错误。原因是我的项目没有部署在域名根目录，而我引用了public文件夹。

今天在项目中使用了public文件夹里的静态资源，在本地测试没有发现问题，但是项目部署到fat服务器却报了404错误。

我发现原因在于我的项目没有部署在域名的根部，而我引用public文件是通过绝对路径方式引用的，因为就出现了路径错误。

路径如下：

<img :src="`/image1.png`">

在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀：process.env.BASE_URL

正确的引用路径是：

<img :src="`${process.env.BASE_URL}image1.png`">

当然，最好避免将文件放在public文件夹，因为任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。