Vue-cli webpack模板中路由渲染组件图片不显示问题求助

我之前碰到过好几次一模一样的问题，这本质上是webpack对不同组件中资源路径的解析规则差异导致的，咱们一步步来排查解决：

先搞懂核心原因 #

在vue-cli的webpack模板里，静态资源的处理分两种情况：

• 相对路径（不带/开头）：webpack会把它当成模块依赖，打包时自动复制到static目录，还会生成带哈希的文件名，确保资源能被正确加载。
• 绝对路径（带/开头）：webpack会直接原样输出这个路径，不会做任何处理，这时候你得确保文件真的在对应的目录下。

你的情况里，Header.vue的图片用了相对路径，被webpack正常处理了；但路由组件里的图片要么用了错误的绝对路径，要么相对路径的层级没写对，导致webpack没处理，或者路径指向了不存在的位置。

具体解决方案 #

1. 修正路由组件的图片路径写法 #

如果你的图片放在src/assets目录下：

• 比如Header.vue在src根目录，引用路径是./assets/logo.png，这没问题；
• 但如果路由组件在src/views/Home.vue，就得写成../assets/logo.png（多退一级目录），这样webpack才能正确找到资源，打包时自动复制到static。
• ❌ 别用绝对路径比如/src/assets/logo.png，dev环境下这个路径会直接指向项目根目录的src，而webpack dev server是从static目录提供静态资源的，自然找不到。

2. 统一用static目录存放图片（更省心） #

把所有需要的图片直接放到static目录下（比如static/img/logo.png），然后不管是Header还是路由组件，都用绝对路径引用：/static/img/logo.png。
这种方式下webpack不会处理这些图片，直接原样输出，只要文件位置对，所有组件都能正常加载。

3. 检查webpack的资源处理配置（兜底方案） #

如果上面的方法都不行，打开build/webpack.base.conf.js，查看module.rules里的url-loader配置，确保它覆盖了你的图片格式：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}

这个配置会把小于10kb的图片转成base64，大于的就输出到static/img目录，确保相对路径的图片能被正确处理。

4. 清除缓存重新构建 #

有时候缓存会搞出奇怪的问题，试试：

• 手动删除dist目录（如果有的话）和node_modules/.cache目录；
• 然后执行npm run dev重新启动项目。

内容的提问来源于stack exchange，提问作者Christopher