Vue JS 如何移除图片名与格式间自动添加的动态数字

文件名和后缀之间自动追加的数字是构建工具（Vite、Webpack等）默认添加的资源内容哈希值，设计初衷是解决静态资源缓存问题：资源内容变动时哈希值会同步改变，强制浏览器拉取最新资源，避免用户访问到旧的缓存内容。默认配置下，经过构建工具处理的图片资源都会自动带上这类哈希后缀。

根据项目使用的构建工具调整对应配置，移除图片资源文件名的哈希规则，即可保留原始的head-big-eye.png格式路径：

• Vite项目：修改项目根目录下的vite.config.js配置文件，自定义构建输出的资源命名规则，示例代码：

import { defineConfig } from 'vite'

export default defineConfig({
  // 其余已有配置保持不变即可
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          // 匹配所有图片格式资源，输出时保留原始文件名，不追加哈希
          if (/\.(png|jpe?g|gif|svg|webp)$/i.test(assetInfo.name)) {
            return 'assets/[name][extname]'
          }
          // 其余非图片资源保持默认带哈希的命名规则，不影响缓存策略
          return 'assets/[name]-[hash][extname]'
        }
      }
    }
  }
})

• Webpack项目（包含Vue CLI、Create React App等基于Webpack封装的脚手架）：修改构建配置中的资源命名规则，示例代码：

// webpack.config.js 配置示例
module.exports = {
  // 其余已有配置保持不变即可
  output: {
    assetModuleFilename: (pathData) => {
      if (/\.(png|jpe?g|gif|svg|webp)$/i.test(pathData.filename)) {
        return 'assets/[name][ext]'
      }
      return 'assets/[name]-[hash][ext]'
    }
  },
  // 若项目使用旧版file-loader处理图片，修改loader配置即可
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]' // 移除配置中的[hash]占位符，就不会生成带数字的文件名
        }
      }
    ]
  }
}

注意：关闭图片资源哈希后，后续如果更新了同名图片，需要手动处理浏览器缓存问题，否则用户可能加载到旧版本图片。如果仅希望开发环境路径简洁，可以只针对开发环境应用上述配置，生产环境保留哈希规则更符合前端工程最佳实践。

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