webpack构建Vue项目时dist生成空哈希图片无法加载如何解决

DevOps 小满

2026-10-5

问题根因说明

你没有使用vue-cli，vue.config.js是vue-cli专属的配置文件，webpack原生不会读取该文件，所以你的配置完全不会生效。
你使用的是webpack5版本，该版本已经内置了静态资源处理能力，你额外安装的file-loader属于已废弃的旧方案，两者同时作用会导致同一份图片资源被重复处理，一份输出你配置的assets/[name].[ext]文件，另一份输出webpack默认规则的哈希命名文件，重复处理还会导致部分文件为空无法加载。

修复步骤

先卸载废弃依赖

npm uninstall file-loader url-loader

修改webpack.config.js中的module.rules配置，替换原有字体、图片处理规则：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      // 保留原有js、vue、css、scss处理规则
      // 替换原有字体处理规则
      {
        test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]'
        }
      },
      // 替换原有图片/视频处理规则
      {
        test: /\.(png|jpe?g|gif|webm|mp4|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name][ext]'
        }
      },
      // 其余原有规则保持不变
    ]
  },
  // 如果你要完全禁用所有资源的哈希命名，可将optimization.moduleIds调整为如下配置
  optimization: {
    moduleIds: "deterministic",
    // 其余原有optimization配置保持不变
  }
}