Nuxt执行npm run generate时图片重复文件夹及哈希重命名问题求解

使用的打包命令如下：
npm run generate

问题1：打包后存在重复img目录，资源路径指向不符合预期【已解决】 #

• 问题表现：打包生成的dist目录下存在两个img文件夹，路径分别为dist/img和dist/_nuxt/img。其中dist/img保留原项目的子文件夹结构，dist/_nuxt/img无层级结构。全站图片默认src指向dist/_nuxt/img下的资源，需要切换为使用dist/img路径下的资源。
• 解决方案：移除img标签src属性中的@/static前缀，将<img src="@/static/img/xxx" />修改为<img src="/img/xxx" />即可。

问题2：打包后图片自动添加随机哈希后缀【解决方案】 #

根据你使用的Nuxt版本，选择对应的配置方案即可：

Nuxt2 配置方法 #

修改项目根目录下的nuxt.config.js文件，添加如下配置：

export default {
  build: {
    // 自定义资源文件名规则，取消图片类资源的哈希后缀
    filenames: {
      asset: ({ isDev, ext }) => {
        const imgExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']
        if (imgExts.includes(ext)) {
          return '[path][name].[ext]'
        }
        return isDev ? '[path][name].[ext]' : '[contenthash:7].[ext]'
      }
    },
    // 扩展webpack配置，覆盖文件加载器的默认命名规则
    extend(config) {
      config.module.rules.forEach(rule => {
        if (rule.test.toString().match(/png|jpe?g|gif|svg|webp/)) {
          rule.use.forEach(use => {
            if (['file-loader', 'url-loader'].includes(use.loader)) {
              use.options.name = '[path][name].[ext]'
              use.options.esModule = false
            }
          })
        }
      })
    }
  },
  // 关闭静态资源前缀添加
  static: {
    prefix: false
  }
}

Nuxt3 配置方法 #

修改项目根目录下的nuxt.config.ts文件，添加如下配置：

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            const ext = assetInfo.name.split('.').pop()
            const imgExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']
            if (imgExts.includes(ext)) {
              // 图片资源取消哈希，保留原始文件名
              return 'assets/[name].[ext]'
            }
            // 其他类型资源保留哈希后缀
            return 'assets/[name].[hash].[ext]'
          }
        }
      }
    }
  },
  // 配置Nitro静态资源处理规则
  nitro: {
    publicAssets: {
      // 取消静态资源的哈希添加
      hash: false
    }
  }
})

注意：配置完成后重新执行npm run generate即可生效。如果仅需要static/public目录下的图片保留原始文件名，直接使用根路径引用（如/img/xxx.jpg）也可避免被添加哈希后缀。

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