如何在 Nuxt 3 中自定义输出文件命名？

Question

在Nuxt 2中，我使用以下配置来控制输出文件的命名：

filenames: {
  app: () => '[name].js',
  chunk: () => '[name].js',
  css: () => '[name].css',
  img: () => '[path][name].[ext]',
  font: () => '[path][name].[ext]',
  video: () => '[path][name].[ext]'
}

（来源：Nuxt 2 文档）

但是，在 Nuxt 3 中，我想实现类似的配置来控制输出文件的命名，而不包含哈希值。您能否指导我在 Nuxt 3 中使用哪些设置来实现此目的？

谢谢大家的协助！

Answer 1

在 Nuxt 3 中，由于前端部分是建立在 Vite/Rollup 之上的，因此您可能需要依赖 Vite 的配置选项来控制资产的命名方式。

请注意，不向文件名添加哈希可能会影响长期缓存，并且在部署更新时可能会导致缓存问题，因为浏览器可能会保留旧文件。通常建议在生产构建期间在文件名中包含哈希值以进行缓存清除。如果您有特定原因不包含哈希值，那么上面的配置应该是一个很好的起点。但是，请确保在部署文件的新版本时有其他方法来进行缓存清除。

// nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    preset: 'server',
    output: {
      serverDir: 'output/server',
      publicDir: 'output/public',
    },
  },
  build: {
    // Rollup options to control output file names
    rollupConfig: {
      output: {
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js',
        assetFileNames: ({ name }) => {
          // Define naming convention based on the file type
          if (/\.css$/i.test(name)) {
            return '[name].css';
          }
          if (/\.(pngjpe?ggifsvgwebp)$/i.test(name)) {
            return 'img/[name][extname]';
          }
          if (/\.(woffwoff2eotttfotf)$/i.test(name)) {
            return 'fonts/[name][extname]';
          }
          if (/\.(mp4webmogv)$/i.test(name)) {
            return 'videos/[name][extname]';
          }
          // Fallback for other assets
          return '[name][extname]';
        },
      },
    },
  }
});