Nuxt v3中动态加载资源失败问题求助

Vite是ESM优先的构建工具，不支持运行时的CommonJSrequire语法，这就是你遇到报错的核心原因。静态引用能正常工作，是因为Nuxt在编译阶段就把~/assets/这类路径别名解析成了Vite能识别的资源地址，但动态require会在客户端运行时执行，Vite无法处理这种调用。

以下是几种可行的解决办法：

• 使用import.meta.url构造资源URL
  这是Vite推荐的动态获取资源路径的方式，直接通过URL构造函数生成资源地址：

  <template>
    <img :src="imageUrl" />
  </template>
  <script setup>
  const imageUrl = new URL('~/assets/img/image.png', import.meta.url).href
  </script>
  

• 用import.meta.glob预加载批量资源
  如果需要动态切换不同资源（比如根据变量拼接路径），可以用import.meta.glob预加载所有可能用到的资源，避免运行时路径解析错误：

  <template>
    <img :src="getImage('avatar.png')" />
  </template>
  <script setup>
  // 预加载assets/img下所有png文件，eager设为true表示立即导入
  const imageMap = import.meta.glob('~/assets/img/*.png', { eager: true, as: 'url' })
  
  const getImage = (filename) => {
    // 注意路径要和glob匹配的格式一致，这里去掉~前缀
    return imageMap[`/assets/img/${filename}`] || ''
  }
  </script>
  

• 使用Nuxt内置的useAsset函数
  Nuxt 3提供了专门处理资源路径的辅助函数useAsset，能自动处理别名和Vite的资源解析：

  <template>
    <img :src="imageUrl" />
  </template>
  <script setup>
  const imageUrl = useAsset('~/assets/img/image.png')
  </script>
  

• 静态导入资源（路径固定时）
  如果资源路径不需要动态变化，直接用ES模块导入替代require：

  <template>
    <img :src="imageUrl" />
  </template>
  <script setup>
  import imageUrl from '~/assets/img/image.png'
  </script>
  

内容的提问来源于stack exchange，提问作者Toni Michel Caubet