vue-cli3访问public文件夹静态资源报错的解决方式

当我们使用Vue.js进行项目开发时，通常需要访问public文件夹中存放的一些静态资源，例如图片、音视频等。但是，有时我们在进行开发时可能会遇到访问public文件夹静态资源时报错的情况，如何解决呢？本文将为你详细讲解。

问题分析

在vue-cli3中，开发环境下引用相对路径的静态资源是没有问题的，但是当我们使用build之后的代码时，引用相对路径的静态资源就会报404错误。

造成这个问题的原因是在build时，默认将所有资源文件打包到了根目录，导致文件路径的变化，从而请求不到相对资源。

解决方案

方案一：使用绝对路径访问静态资源

我们可以通过绝对路径的方式来访问public文件夹中的静态资源，这样就可以避免路径的变化引起的问题。例如，我们可以通过下面的方式来引用public文件夹中的图片：

<img src="/img/logo.png">

上述代码中的"/"表示应用的根目录，因此图片资源的路径会被解析为根目录下的img目录。

方案二：修改vue.config.js配置文件

我们可以通过修改vue.config.js配置文件来修改资源的基础路径，从而解决访问静态资源的问题。具体的步骤如下：

1. 在项目的根目录下新建vue.config.js文件。
2. 在该文件中添加如下代码：

module.exports = {
    publicPath: "./"
 }

上述代码中的"./"表示资源的相对路径为当前项目的根目录，也可以根据实际情况自行修改。

1. 保存文件并重新启动项目。

这样，我们就可以愉快地访问public文件夹下的静态资源了。

示例说明

示例一：使用绝对路径访问静态资源

假设我们在public文件夹下有一张名为"logo.png"的图片，我们可以通过下面的代码来访问该图片：

<img src="/img/logo.png">

上述代码中的"/"表示应用的根目录，因此图片资源的路径会被解析为根目录下的img目录。

示例二：修改vue.config.js配置文件

我们在项目根目录下新建vue.config.js文件，并加入以下内容：

module.exports = {
    publicPath: "./"
 }

保存文件并重新启动项目，便可以愉快地访问public文件夹下的静态资源了。

以上就是解决vue-cli3访问public文件夹静态资源报错的完整攻略，希望对你有所帮助。