vue项目打包后图片路径错误解决方案

一、问题/场景描述

在 Vue 项目开发过程中，开发者经常遇到这样的问题：项目在本地开发环境运行时，图片显示正常，但执行

npm run build

打包后，部署到服务器或本地预览时，图片路径出现 404 错误，无法正常加载。该问题常见于使用 Vue CLI 创建的项目，尤其在配置了相对路径或使用了静态资源引用时频繁出现。

二、原因分析

该问题的根本原因在于 Vue CLI 打包时的路径配置与资源引用方式不匹配。具体来说：

第一，Vue CLI 默认打包后的资源路径为绝对路径（以

/

开头），而部署环境可能使用子目录或相对路径，导致资源找不到。

第二，在模板或组件中直接使用相对路径引用图片（如

./assets/logo.png

），打包后路径计算错误。

第三，使用

require

或

import

动态加载图片时，未正确处理路径变量。

三、详细解决步骤

步骤1：修改 publicPath 配置

在项目根目录的

vue.config.js

文件中，设置

publicPath

为相对路径

'./'

：

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static'
}

步骤2：使用 require 或 import 引用静态图片

在 Vue 组件中，避免直接使用字符串路径，改用

require

或

import

引入图片：

<template>
  <img :src="logo" />
</template>
<script>
export default {
  data() {
    return {
      logo: require('@/assets/logo.png')
    }
  }
}
</script>

步骤3：处理动态路径

如果图片路径是动态的（如从接口获取），使用

require

拼接：

getImg(imgName) {
  return require(@/assets/${imgName}.png)
}

步骤4：将图片放入 public 目录

将不常变动的图片放入

public

目录，直接引用绝对路径：

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

注意：此时

publicPath

必须设置为绝对路径（如

/

）。

步骤5：验证打包结果

执行以下命令重新打包并本地预览：

npm run build
npx serve dist

打开浏览器访问

http://localhost:3000

，检查图片是否正常显示。

四、注意事项

第一，修改

publicPath

为

'./'

后，路由的

history

模式可能会失效，需改用

hash

模式。第二，使用

require

时路径必须为静态字符串或可解析表达式。第三，部署到 CDN 时需将

publicPath

设为 CDN 地址。

五、适用环境

本文适用于 Vue CLI 3.x / 4.x / 5.x 项目，Node.js 12+ 环境，Nginx 或 Serve 静态服务器均可。