在使用 Vue.js 进行前端开发时，经常会使用 webpack 进行打包，但是在打包过程中，有时候会遇到图片相对路径出错的问题，导致图片无法正常加载。本文将介绍如何解决这个问题。
问题描述
在 Vue.js 项目中，我们通常会在组件中引入图片，例如：
<template>
<div>
<img src="./images/logo.png" alt="logo">
</div>
</template>在开发环境中，这样引入图片是没有问题的，因为 webpack 会将图片打包到 dist 目录下，并生成一个随机的文件名，例如 1234567.png，然后在 HTML 中引用这个文件名。但是在生产环境中，由于 webpack 会将所有的资源打包到一个文件中，所以就会出现图片相对路径出错的问题。
解决方法
方法一：使用绝对路径
一种解决方法是使用绝对路径来引用图片，例如：
<template>
<div>
<img :src="`${process.env.BASE_URL}images/logo.png`" alt="logo">
</div>
</template>这里的 process.env.BASE_URL 是 Vue CLI 中默认设置的一个环境变量，它的值是项目的基础路径，例如 / 或 /my-project/。在开发环境和生产环境中，它的值是不同的。在开发环境中，它的值是 /，所以这种方法可以正常工作。但是在生产环境中，它的值是项目的部署路径，例如 /my-project/，所以这种方法也可以正常工作。
方法二：使用 file-loader 或 url-loader
另一种解决方法是使用 file-loader 或 url-loader 来处理图片。这两个 loader 可以将图片复制到输出目录，并返回图片的 URL。我们可以在 webpack 配置中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------------------------
------- -------------
-------- -
------ ------
----- ------------------------------
-
-
-
-
-这里的 url-loader 会将小于 10KB 的图片转换成 base64 编码，而大于 10KB 的图片则会被复制到输出目录，并返回图片的 URL。我们可以在组件中使用相对路径来引用图片，例如：
<template>
<div>
<img src="./images/logo.png" alt="logo">
</div>
</template>这种方法可以在开发环境和生产环境中正常工作。
总结
在使用 Vue.js 进行前端开发时，我们经常会使用 webpack 进行打包。但是在打包过程中，有时候会遇到图片相对路径出错的问题。本文介绍了两种解决方法：使用绝对路径和使用 file-loader 或 url-loader。这些方法可以帮助我们解决这个问题，让我们的项目能够正常地加载图片。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65148d9c95b1f8cacdcf5f6f