Nuxt 3中如何正确配置资源动态路径？

方案1：使用import.meta.glob动态导入资源（推荐） #

这是Vite/Nuxt官方推荐的动态资源处理方式，会自动处理资源哈希映射，适配开发和静态生成场景。

在你的独立脚本或组件中，通过glob批量导入目标目录下的图片：

// 批量导入assets/images下的所有svg文件，生成路径映射
const imageAssets = import.meta.glob('../assets/images/*.svg', { eager: true, as: 'url' })

// 封装获取图片路径的函数
const getIconUrl = (iconName) => {
  // 匹配对应的文件路径，返回编译后的正确URL
  return imageAssets[`../assets/images/${iconName}.svg`] || ''
}

// 使用示例：获取energy.svg的路径
const iconUrl = getIconUrl('energy')

这样不管是开发模式还是执行nuxt generate静态生成，Vite都会自动替换为带正确哈希后缀的路径，避免失效问题。

方案2：配置Vite禁用资源哈希（应急用） #

如果需要保留固定文件名路径，可以修改nuxt.config.ts，让Vite静态生成时不给资源加哈希后缀，但会失去缓存更新的优势：

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          // 自定义资源输出命名规则，去掉哈希
          assetFileNames: 'assets/images/[name].[ext]'
        }
      }
    }
  }
})

配置后，静态生成的资源文件名会保持原样（如energy.svg），之前的/_nuxt/assets/images/energy.svg路径就能正常使用。

方案3：使用public目录存放资源 #

将图片放到项目根目录的public文件夹下（如public/assets/images/energy.svg），直接使用/assets/images/energy.svg作为路径。

public目录下的资源会被原封不动复制到静态输出目录，不会添加哈希后缀，开发和静态生成场景都能直接访问。缺点是无法利用哈希做缓存优化，更新资源后需要手动清理客户端缓存。

内容的提问来源于stack exchange，提问作者Sebastian Aguirre Duque