Vue3如何移除指定PNG文件文件名中的哈希值？

问题背景 #

需要让用于邮件页脚的logo.png文件名固定（不带哈希），避免哈希变化导致邮件中图片失效，Vue3.2.13 + Options API环境，之前尝试的配置未生效，且不想全局禁用哈希影响缓存。

可行解决方案 #

方案1：直接将图片放入public文件夹（最简单）

把logo.png移动到项目根目录的public文件夹中，引用时使用绝对路径：

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

打包时Vue CLI会直接将public下的文件原封不动复制到dist根目录，文件名保持logo.png不变，直接用域名+路径（如https://your-site.com/logo.png）即可在邮件中正常使用。

方案2：修改Webpack规则精准处理目标图片

如果要保留在assets目录中，通过chainWebpack或configureWebpack配置单独规则：

用chainWebpack配置（推荐，更灵活）

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 为logo.png创建单独的loader规则
    config.module
      .rule('fixed-logo')
      .test(/logo\.png$/) // 精确匹配原文件
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096, // 小于4kb转为base64，大于则用file-loader输出文件
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]', // 固定文件名，无哈希
            esModule: false // 避免引入时的模块格式问题
          }
        }
      })
      .end()
  }
}

用configureWebpack配置

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /logo\.png$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 4096,
                fallback: {
                  loader: 'file-loader',
                  options: {
                    name: 'img/[name].[ext]',
                    esModule: false
                  }
                }
              }
            }
          ],
          enforce: 'pre' // 强制优先执行该规则，覆盖默认webpack规则
        }
      ]
    }
  }
}

之前尝试失败的原因 #

1. 原配置的test匹配规则太宽泛（/logo*\.png/），可能匹配到已添加哈希的文件，改为精确匹配/logo\.png$/才能命中原文件。
2. 未设置enforce: 'pre'，导致Vue CLI默认的图片处理规则优先执行，覆盖了自定义规则。
3. file-loader默认开启esModule，可能导致require引入时的路径处理异常，关闭后可解决部分显示问题。

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