如何在Vite+Svelte项目中动态导入路径含变量的JSON文件

Vite 基于ES模块构建，不支持完全动态的导入路径（打包阶段无法静态分析未知路径的依赖），也无法在Svelte的ES模块环境下直接使用CommonJS规范的require语法，正确实现方式是使用Vite内置的import.meta.glob能力：

• 第一步：提前通过glob规则匹配所有可能被动态导入的JSON文件
  传入eager: true可以在构建时直接加载JSON内容，不需要运行时异步请求；import: 'default'可以直接拿到JSON解析后的对象，不需要额外读取default属性：

  // 请根据你的JSON文件实际存放路径修改glob匹配规则
  // 示例规则表示匹配当前目录下data文件夹内所有层级的.json文件
  const allJsonModules = import.meta.glob('./data/**/*.json', {
    eager: true,
    import: 'default'
  })
  

  注意：glob匹配路径必须以./或../开头的相对路径，不支持写绝对路径和完全动态的路径片段。

• 第二步：根据动态变量拼接目标文件路径，直接从预匹配的模块集合中取对应内容即可

  // 假设你的动态路径变量是sceneId，实际需要导入的文件路径为./data/${sceneId}.json
  const dynamicPath = `./data/${sceneId}.json`
  const targetJson = allJsonModules[dynamicPath]
  
  // 增加容错判断，避免路径拼接错误导致取值失败
  if (!targetJson) {
    throw new Error(`未找到对应配置文件：${dynamicPath}`)
  }
  

如果你的JSON文件体积较大，不希望首屏就加载所有匹配的JSON，可以去掉eager: true配置，改用异步方式加载目标文件：

const allJsonModules = import.meta.glob('./data/**/*.json', { import: 'default' })

const dynamicPath = `./data/${sceneId}.json`
const loadTargetJson = allJsonModules[dynamicPath]
if (!loadTargetJson) {
  throw new Error(`未找到对应配置文件：${dynamicPath}`)
}
// 异步加载目标JSON
const targetJson = await loadTargetJson()

内容的提问来源于stack exchange，提问作者MrFrenzoid