Nuxt搭配Vite环境下如何替代require实现动态资源加载

报错原因 #

Vite 原生基于 ES Module 规范实现，不支持 CommonJS 规范的 require 语法，同时底层依赖的 Rollup 要求导入路径必须是静态可分析的，不支持完全动态的路径拼接写法。

解决方案 #

方案1：使用 Vite 原生 import.meta.glob 预加载资源 #

这是最贴合 Vite 生态的实现方式，提前预加载目标目录下所有匹配的资源，构建阶段 Vite 会自动处理所有匹配到的文件，运行时直接从预生成的映射表中取值即可：

// 提前预加载 services 目录下所有 svg 文件，eager 配置为 true 表示初始化时直接加载全部资源
const serviceIconMap = import.meta.glob('../../static/images/svg/services/*.svg', { eager: true })

function getServiceIcon(iconName) {
  const iconPath = `../../static/images/svg/services/${iconName}.svg`
  // 返回对应资源的导出内容即可
  return serviceIconMap[iconPath]?.default
}

如果需要按需异步加载资源，去掉 eager: true 配置即可，此时返回的是 Promise 异步对象。

方案2：直接使用 public 目录静态资源映射 #

如果你的 svg 不需要做编译优化（比如转组件、自动压缩），可以把所有 svg 资源放到 Nuxt 项目的 public 目录下，直接拼接资源路径即可，不需要做导入操作：

1. 将 svg 文件移动到 /public/images/svg/services/ 目录下
2. 工具函数直接返回访问路径：

function getServiceIcon(iconName) {
  return `/images/svg/services/${iconName}.svg`
}

public 目录下的资源会直接映射到站点根路由，构建时不会被编译处理，适合纯静态资源的场景。

注意事项 #

动态导入路径必须固定前缀和后缀，仅保留文件名部分动态，否则 Rollup 无法识别需要打包的资源范围，会导致资源加载失败。

内容的提问来源于stack exchange，提问作者Endre Szabó