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

fix vitejs#4628)

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

@@ -4,10 +4,12 @@ import fs, { promises as fsp } from 'fs'
 import * as mrmime from 'mrmime'
 import type { OutputOptions, PluginContext } from 'rollup'
 import MagicString from 'magic-string'
+import colors from 'picocolors'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { cleanUrl, getHash, isRelativeBase, normalizePath } from '../utils'
 import { FS_PREFIX } from '../constants'
+import { createLogger } from '../logger'
 
 export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
 
@@ -353,11 +355,48 @@ async function fileToBuiltUrl(
     const { search, hash } = parseUrl(id)
     const postfix = (search || '') + (hash || '')
     const output = config.build?.rollupOptions?.output
-    const assetFileNames =
+
+    // Steps to determine which assetFileNames will be actually used.
+    const defaultAssetFileNames = path.posix.join(
+      config.build.assetsDir,
+      '[name].[hash][extname]'
+    )
+    // First, if output is an object, 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
+      // Third, check if assetFileNames among output array return the same result.
+      // If not, log a warn and keep using the first assetFileNames.
+      const filenameSet = output.reduce(
+        (cumulate, { assetFileNames = defaultAssetFileNames }) => {
+          const filename =
+            typeof assetFileNames === 'string'
+              ? assetFileNames
+              : assetFileNames({
+                  type: 'asset',
+                  name: file,
+                  source: content
+                })
+          cumulate.add(filename)
+          return cumulate
+        },
+        new Set<string>()
+      )
+      if (filenameSet.size > 1) {
+        createLogger('warn').warn(
+          colors.yellow(`
+Found that you've configure multiple assetFileNames in build.rollupOptions.output, 
+and their return values are inconsistent. Vite has adopted the first assetFileNames in the array.
+If you expecting a different asset file name, change the first assetFileNames in the array.
+`)
+        )
+      }
+    }
+
     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`
+        }
+      ]
+    }
+  }
+})