feat(vite): handle multiple/custom public dirs

packages/nuxt/src/core/plugins/layer-aliasing.ts

@@ -1,8 +1,7 @@
-import { existsSync, readdirSync } from 'node:fs'
 import { createUnplugin } from 'unplugin'
 import type { NuxtConfigLayer } from 'nuxt/schema'
 import { resolveAlias } from '@nuxt/kit'
-import { join, normalize, relative } from 'pathe'
+import { normalize } from 'pathe'
 import MagicString from 'magic-string'
 
 interface LayerAliasingOptions {
@@ -17,21 +16,16 @@ const ALIAS_RE = /(?<=['"])[~@]{1,2}(?=\/)/g
 const ALIAS_RE_SINGLE = /(?<=['"])[~@]{1,2}(?=\/)/
 
 export const LayerAliasingPlugin = createUnplugin((options: LayerAliasingOptions) => {
-  const aliases: Record<string, { aliases: Record<string, string>, prefix: string, publicDir: false | string }> = {}
+  const aliases: Record<string, Record<string, string>> = {}
   for (const layer of options.layers) {
     const srcDir = layer.config.srcDir || layer.cwd
     const rootDir = layer.config.rootDir || layer.cwd
-    const publicDir = join(srcDir, layer.config?.dir?.public || 'public')
 
     aliases[srcDir] = {
-      aliases: {
-        '~': layer.config?.alias?.['~'] || srcDir,
-        '@': layer.config?.alias?.['@'] || srcDir,
-        '~~': layer.config?.alias?.['~~'] || rootDir,
-        '@@': layer.config?.alias?.['@@'] || rootDir
-      },
-      prefix: relative(options.root, publicDir),
-      publicDir: !options.dev && existsSync(publicDir) && publicDir
+      '~': layer.config?.alias?.['~'] || srcDir,
+      '@': layer.config?.alias?.['@'] || srcDir,
+      '~~': layer.config?.alias?.['~~'] || rootDir,
+      '@@': layer.config?.alias?.['@@'] || rootDir
     }
   }
   const layers = Object.keys(aliases).sort((a, b) => b.length - a.length)
@@ -48,13 +42,7 @@ export const LayerAliasingPlugin = createUnplugin((options: LayerAliasingOptions
           const layer = layers.find(l => importer.startsWith(l))
           if (!layer) { return }
 
-          const publicDir = aliases[layer].publicDir
-          if (id.startsWith('/') && publicDir && readdirSync(publicDir).some(file => file === id.slice(1) || id.startsWith('/' + file + '/'))) {
-            const resolvedId = '/' + join(aliases[layer].prefix, id.slice(1))
-            return await this.resolve(resolvedId, importer, { skipSelf: true })
-          }
-
-          const resolvedId = resolveAlias(id, aliases[layer].aliases)
+          const resolvedId = resolveAlias(id, aliases[layer])
           if (resolvedId !== id) {
             return await this.resolve(resolvedId, importer, { skipSelf: true })
           }
@@ -76,7 +64,7 @@ export const LayerAliasingPlugin = createUnplugin((options: LayerAliasingOptions
       if (!layer || !ALIAS_RE_SINGLE.test(code)) { return }
 
       const s = new MagicString(code)
-      s.replace(ALIAS_RE, r => aliases[layer].aliases[r as '~'] || r)
+      s.replace(ALIAS_RE, r => aliases[layer][r as '~'] || r)
 
       if (s.hasChanged()) {
         return {

packages/schema/src/config/vite.ts

@@ -1,5 +1,4 @@
 import { consola } from 'consola'
-import { resolve } from 'pathe'
 import { isTest } from 'std-env'
 import { withoutLeadingSlash } from 'ufo'
 import { defineUntypedSchema } from 'untyped'
@@ -36,11 +35,11 @@ export default defineUntypedSchema({
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
     },
     publicDir: {
-      $resolve: async (val, get) => {
+      $resolve: (val) => {
         if (val) {
           consola.warn('Directly configuring the `vite.publicDir` option is not supported. Instead, set `dir.public`. You can read more in `https://nuxt.com/docs/api/nuxt-config#public`.')
         }
-        return val ?? await Promise.all([get('srcDir') as Promise<string>, get('dir') as Promise<Record<string, string>>]).then(([srcDir, dir]) => resolve(srcDir, dir.public))
+        return false
       }
     },
     vue: {

packages/vite/src/plugins/public-dirs.ts

@@ -0,0 +1,40 @@
+import { existsSync } from 'node:fs'
+import { createUnplugin } from 'unplugin'
+import { withTrailingSlash } from 'ufo'
+import { useNitro } from '@nuxt/kit'
+
+const PREFIX = 'virtual:public?'
+
+export const VitePublicDirsPlugin = createUnplugin(() => {
+  const nitro = useNitro()
+  const publicFiles = new Set()
+
+  return {
+    name: 'nuxt:vite-public-dir-resolution',
+    vite: {
+      load: {
+        enforce: 'pre',
+        handler (id) {
+          if (id.startsWith(PREFIX)) {
+            return `export default __publicAssetsURL(${JSON.stringify(decodeURIComponent(id.slice(PREFIX.length)))})`
+          }
+        }
+      },
+      resolveId: {
+        enforce: 'post',
+        handler (id) {
+          if (id === '/__skip_vite' || !id.startsWith('/') || id.startsWith('/@fs')) { return }
+
+          for (const dir of nitro.options.publicAssets) {
+            if (!id.startsWith(withTrailingSlash(dir.baseURL || '/'))) { continue }
+            const path = id.replace(withTrailingSlash(dir.baseURL || '/'), withTrailingSlash(dir.dir))
+            if (existsSync(path)) {
+              publicFiles.add(path)
+              return PREFIX + encodeURIComponent(id)
+            }
+          }
+        }
+      }
+    }
+  }
+})

packages/vite/src/vite.ts

@@ -17,6 +17,7 @@ import { resolveCSSOptions } from './css'
 import { composableKeysPlugin } from './plugins/composable-keys'
 import { logLevelMap } from './utils/logger'
 import { ssrStylesPlugin } from './plugins/ssr-styles'
+import { VitePublicDirsPlugin } from './plugins/public-dirs'
 
 export interface ViteBuildContext {
   nuxt: Nuxt
@@ -98,6 +99,8 @@ export const bundle: NuxtBuilder['bundle'] = async (nuxt) => {
           }
         },
         plugins: [
+          // add resolver for files in public assets directories
+          VitePublicDirsPlugin.vite(),
           composableKeysPlugin.vite({
             sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client,
             rootDir: nuxt.options.rootDir,

test/basic.test.ts

@@ -1815,6 +1815,14 @@
   })
 })
 
+describe('public directories', () => {
+  it('should directly return public directory paths', async () => {
+    const html = await $fetch('/assets-custom')
+    expect(html).toContain('"/public.svg"')
+    expect(html).toContain('"/custom/file.svg"')
+  })
+})
+
 // TODO: dynamic paths in dev
 describe.skipIf(isDev())('dynamic paths', () => {
   it('should work with no overrides', async () => {
@@ -1833,7 +1841,7 @@
     expect(cssURL).toBeDefined()
     const css: string = await $fetch(cssURL!)
     const imageUrls = Array.from(css.matchAll(/url\(([^)]*)\)/g)).map(m => m[1].replace(/[-.][\w]{8}\./g, '.'))
     expect(imageUrls).toMatchInlineSnapshot(`
         [
           "./logo.svg",
           "../public.svg",

test/fixtures/basic/nuxt.config.ts

@@ -44,6 +44,12 @@ export default defineNuxtConfig({
     './extends/node_modules/foo'
   ],
   nitro: {
+    publicAssets: [
+      {
+        dir: '../custom-public',
+        baseURL: '/custom'
+      }
+    ],
     esbuild: {
       options: {
         // in order to test bigint serialization

test/fixtures/basic/pages/assets-custom.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <img src="/public.svg">
+    <img src="/custom/file.svg">
+  </div>
+</template>