fix(asset): respect assetFileNames if rollupOptions.output is an array

packages/vite/src/node/config.ts

@@ -8,7 +8,7 @@ import type { Alias, AliasOptions } from 'types/alias'
 import { createFilter } from '@rollup/pluginutils'
 import aliasPlugin from '@rollup/plugin-alias'
 import { build } from 'esbuild'
-import type { RollupOptions } from 'rollup'
+import type { OutputOptions, RollupOptions } from 'rollup'
 import type { Plugin } from './plugin'
 import type { BuildOptions, ResolvedBuildOptions } from './build'
 import { resolveBuildOptions } from './build'
@@ -566,6 +566,33 @@ export async function resolveConfig(
     )
   }
 
+  // Check if all assetFileNames functions have the same reference.
+  // If not, display a warn for user.
+  const outputOption = config.build?.rollupOptions?.output ?? []
+  // Use isArray to narrow its type to array
+  if (Array.isArray(outputOption)) {
+    const assetFileNamesFunctions = outputOption
+      .map((output) => output.assetFileNames)
+      .filter(
+        (assetFileNames) => typeof assetFileNames === 'function'
+      ) as Exclude<OutputOptions['assetFileNames'], undefined | string>[]
+    if (assetFileNamesFunctions.length > 1) {
+      const firstFunction = assetFileNamesFunctions[0]
+      const hasDifferentFunction = assetFileNamesFunctions
+        .slice(1)
+        .some((assetFileNames) => assetFileNames !== firstFunction)
+      if (hasDifferentFunction) {
+        resolved.logger.warn(
+          colors.yellow(`
+It's recommended that all assetFileNames in function syntax have the same reference.
+In other words, every function1 === function2 should be true.
+Vite adopts the first assetFileNames if build.rollupOptions.output is an array.
+`)
+        )
+      }
+    }
+  }
+
   return resolved
 }
 

packages/vite/src/node/plugins/asset.ts

@@ -353,11 +353,22 @@ async function fileToBuiltUrl(
     const { search, hash } = parseUrl(id)
     const postfix = (search || '') + (hash || '')
     const output = config.build?.rollupOptions?.output
-    const assetFileNames =
+
+    const defaultAssetFileNames = path.posix.join(
+      config.build.assetsDir,
+      '[name].[hash][extname]'
+    )
+    // Steps to determine which assetFileNames will be actually used.
+    // First, if output is an object or string, use assetFileNames in it.
+    // And a default assetFileNames as fallback.
+    let assetFileNames: Exclude<OutputOptions['assetFileNames'], undefined> =
       (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??
-      // defaults to '<assetsDir>/[name].[hash][extname]'
-      // slightly different from rollup's one ('assets/[name]-[hash][extname]')
-      path.posix.join(config.build.assetsDir, '[name].[hash][extname]')
+      defaultAssetFileNames
+    if (output && Array.isArray(output)) {
+      // Second, if output is an array, adopt assetFileNames in the first object.
+      assetFileNames = output[0].assetFileNames ?? assetFileNames
+    }
+
     const fileName = assetFileNamesToFileName(
       assetFileNames,
       file,

playground/legacy/main.js

@@ -1,4 +1,5 @@
 import './style.css'
+import './vite.svg'
 
 async function run() {
   const { fn } = await import('./async.js')

playground/legacy/package.json

@@ -7,6 +7,7 @@
     "build": "vite build --debug legacy",
     "build:custom-filename": "vite --config ./vite.config-custom-filename.js build  --debug legacy",
     "build:dynamic-css": "vite --config ./vite.config-dynamic-css.js build  --debug legacy",
+    "build:multiple-output": "vite --config ./vite.config-multiple-output.js build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview"
   },

playground/legacy/vite.config-multiple-output.js

@@ -0,0 +1,24 @@
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [legacy({ modernPolyfills: true })],
+  build: {
+    manifest: true,
+    minify: false,
+    rollupOptions: {
+      output: [
+        {
+          assetFileNames: 'assets/subdir/[name].[hash][extname]',
+          entryFileNames: `assets/subdir/[name].js`,
+          chunkFileNames: `assets/subdir/[name].js`
+        },
+        {
+          assetFileNames: 'assets/anotherSubdir/[name].[hash][extname]',
+          entryFileNames: `assets/anotherSubdir/[name].js`,
+          chunkFileNames: `assets/anotherSubdir/[name].js`
+        }
+      ]
+    }
+  }
+})