Nuxt.js构建后dist目录缺失CSS和JS文件排查求助

我在Nuxt3中配置Vite移除了生成文件的哈希值，但执行npm run build后，dist目录里找不到CSS和JS文件。

我的Vite配置如下：

vite: {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,

        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith('.css'))
            return 'assets/css/[name][extname]'

          if (/\.(png|jpe?g|gif|svg|webp)$/i.test(assetInfo.name))
            return 'assets/img/[name][extname]'

          if (/\.(woff|woff2|eot|ttf|otf)$/i.test(assetInfo.name))
            return 'assets/fonts/[name][extname]'

          if (/\.(mp4|webm|ogv)$/i.test(assetInfo.name))
            return 'assets/videos/[name][extname]'

          return 'assets/[name][extname]'
        },
      },
    },
  },
}

dist目录截图：

排查方案与解决办法 #

• 检查构建日志：执行npm run build时仔细查看控制台输出，确认是否有文件命名冲突、路径创建失败等报错信息——同名JS文件被覆盖是常见原因，比如多个chunk都生成assets/[name].js，后生成的文件会覆盖之前的，最终可能只留下少数文件甚至全部丢失。

• 简化配置排查：先移除assetFileNames的复杂分类逻辑，用最简配置测试是否能生成文件：

vite: {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name]-[hash:6].js`, // 先保留部分哈希避免同名覆盖
        assetFileNames: `assets/[name][extname]`
      }
    }
  }
}

如果此配置能正常生成文件，再逐步添加assetFileNames的分类规则，定位是哪个判断分支导致的问题。

• 适配Nuxt3构建逻辑：Nuxt3有自身的资源目录配置，建议结合app.buildAssetsDir来调整路径，避免直接修改Vite配置干扰Nuxt的构建流程：

export default defineNuxtConfig({
  app: {
    buildAssetsDir: 'assets' // 统一资源根目录
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          entryFileNames: `[name].js`,
          chunkFileNames: `[name]-[hash:6].js`,
          assetFileNames: (assetInfo) => {
            if (assetInfo.name.endsWith('.css'))
              return 'css/[name][extname]'
            if (/\.(png|jpe?g|gif|svg|webp)$/i.test(assetInfo.name))
              return 'img/[name][extname]'
            if (/\.(woff|woff2|eot|ttf|otf)$/i.test(assetInfo.name))
              return 'fonts/[name][extname]'
            if (/\.(mp4|webm|ogv)$/i.test(assetInfo.name))
              return 'videos/[name][extname]'
            return '[name][extname]'
          }
        }
      }
    }
  }
})

• 检查Nuxt配置冲突：确认是否有其他Nuxt插件或配置（如nitro相关配置）修改了构建输出路径，导致JS/CSS文件被生成到了其他目录而非dist下。

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