如何在Nuxt 3中自定义输出文件命名（无哈希值）

Nuxt 3 默认使用 Vite 作为构建工具，要实现和你在 Nuxt 2 中类似的无哈希文件命名配置，可按以下方式设置：

Vite 构建工具配置 #

在 nuxt.config.ts 中通过 vite.build.rollupOptions 配置输出规则：

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          // 入口JS文件（对应Nuxt2的app配置）
          entryFileNames: '[name].js',
          // 拆分的chunk文件（对应Nuxt2的chunk配置）
          chunkFileNames: '[name].js',
          // 静态资源文件（涵盖CSS、图片、字体、视频等）
          assetFileNames: (assetInfo) => {
            if (assetInfo.name?.endsWith('.css')) {
              return '[name].css';
            }
            return '[path][name].[ext]';
          }
        }
      }
    }
  }
})

Webpack 构建工具配置 #

如果你的项目使用 Webpack 作为构建工具（需先安装 @nuxt/webpack-builder），配置方式和 Nuxt 2 高度一致：

export default defineNuxtConfig({
  builder: 'webpack',
  webpack: {
    filenames: {
      app: '[name].js',
      chunk: '[name].js',
      css: '[name].css',
      img: '[path][name].[ext]',
      font: '[path][name].[ext]',
      video: '[path][name].[ext]'
    }
  }
})

注意事项 #

• 移除哈希值后，需注意浏览器缓存问题，建议在生产环境为静态资源配置合适的 Cache-Control 响应头，避免用户加载旧资源。
• 确保项目中没有依赖哈希文件名的业务逻辑，否则可能导致资源加载失败。

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