Vite构建如何配置指定chunk生成不带hash的文件名

架构老林

2026-8-28

问题根因

当前配置仅对CSS生效，是因为Rollup对不同类型的构建产物使用独立的命名规则，你只配置了静态资源的命名规则：

assetFileNames：仅管控静态类产物，包括CSS、图片、字体、媒体文件等，JS产物完全不走这个规则
entryFileNames：管控input字段中手动声明的入口文件对应的JS产物
chunkFileNames：管控构建时自动拆分的异步加载chunk、公共依赖chunk等JS产物

修正方案

补充JS产物对应的两个命名规则，针对myapp入口单独配置无hash的命名逻辑即可：

build: {
  target: 'es2020',
  rollupOptions: {
    input: {
      main: fileURLToPath(new URL('./index.html', import.meta.url)),
      myapp: fileURLToPath(new URL('./src/my-app.ts', import.meta.url))
    },
    output: {
      // 静态资源（含CSS）命名规则
      assetFileNames: (assetInfo) => {
        if (assetInfo.name?.toLocaleLowerCase().includes('myapp')) {
          return 'assets/[name][extname]';            
        }
        return 'assets/[name]-[hash][extname]';
      },
      // 手动声明的入口JS命名规则
      entryFileNames: (chunkInfo) => {
        if (chunkInfo.name === 'myapp') {
          return 'assets/[name].js';
        }
        return 'assets/[name]-[hash].js';
      },
      // 自动拆分的JS chunk命名规则
      chunkFileNames: (chunkInfo) => {
        // 若需要myapp关联的异步chunk也不带hash，放开以下注释即可
        // if (chunkInfo.facadeModuleId?.includes('my-app.ts')) {
        //   return 'assets/[name].js';
        // }
        return 'assets/[name]-[hash].js';
      }
    },
  }
}

补充说明