2023vue-cli3打包之后图片路径不对

随着前端技术的不断发展，各种框架和工具也不断涌现，在这个大浪淘沙的时代，Vue.js 无疑是一个不可忽视的存在。然而，随着 Vue.js 日益普及，我们也会遇到一些问题。本文将介绍在使用 vue-cli3 打包项目时，遇到图片路径错误的问题，并提供一些解决方案。

问题描述

在使用 vue-cli3 进行项目开发时，我们通常可以使用 img 标签来引入图片。例如：

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

这里假设 logo.png 图片位于项目的 assets 目录下。在运行 npm run serve 命令时，该图片可以正确显示。但是，当我们运行 npm run build 命令进行打包后，我们访问打包后的页面却发现图片无法正常显示，通过浏览器的开发者工具，我们可以发现其实图片加载失败了，并且控制台给出了如下错误信息：

http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)

这里的 http://your-domain.com 是指打包后项目的根目录路径。

造成这个问题的原因

我们知道，Vue.js 基于组件化的开发模式，一般情况下，每个组件都是一个单独的文件，包括 HTML 模板、CSS 样式、JavaScript 代码等。在 Vue.js 的开发过程中，我们通常会使用 webpack 打包工具来进行构建打包。由于 webpack 文件打包的机制，它会将每个组件所需的所有资源打包到相应的 JavaScript 文件中，而浏览器仅能通过 HTTP 请求获取到静态资源，因此 webpack 打包时会将资源文件（包括图片）的路径转换为 HTTP 请求路径。

换句话说，当我们使用相对路径来引用资源文件时，在项目运行时该图片会在 http://localhost:8080 根目录下搜索，而在打包时，图片的路径已经被 webpack 打包为新的路径，并放在了根目录下的 img 目录下。因此，我们在使用 webpack 打包后的文件时，需要针对路径进行修改。

解决方案

修改静态资源根路径

我们可以通过修改 vue.config.js 中 publicPath 字段的值来替换根路径，从而解决路径错误的问题。

首先，在项目根目录中新建 vue.config.js 文件，并输入如下代码：

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

这里的 publicPath 实际上就是设置了打包后的静态资源存放路径，上述代码表示静态资源和 index.html 存放在同一个目录下。

使用绝对路径引用图片

除了通过修改 publicPath 来解决问题，我们还可以直接使用绝对路径来引用图片，这样就避免了由相对路径带来的问题。例如：

<img src="/img/logo.4aebf758.png" alt="logo" />

这里的 / 表示项目根路径，通过此方式引用的图片不会受相对路径的影响。

将图片文件放置在公共目录下

我们也可以将图片文件放置在 /public 目录下，这个目录下的文件不会被 webpack 打包，而是直接复制到打包后的目录下。这样我们就可以直接使用相对路径引用这些图片了。

总结

不管是通过修改路径还是使用绝对路径引用图片，解决方法都比较简单。在实际开发中，为了减少路径错误的问题，我们可以在开发时养成好习惯，尽量使用绝对路径或者将图片放置在公共目录下。这样不仅便于调试和维护，也可减少打包后的路径错误问题。希望本文对您有所帮助。

以上就是vue-cli3打包之后图片路径不对的详细内容，更多请关注zzsucai.com其它相关文章！