在Vite中如何实现类似require的同步JSON导入？

Vite基于ES模块规范，原生ES模块没有同步动态导入的API，但可以通过以下几种方案实现接近require的同步效果：

1. 静态导入（路径固定时优先用） #

如果JSON文件的路径是固定的，直接用ES静态导入即可，完全同步：

import lang from './zh-CN.json'
// 直接使用lang的索引，比如lang.title

这种方式最简单，Vite会在构建阶段就把JSON文件打包进代码，运行时直接可用。

2. 预导入+映射表（动态路径但范围有限） #

如果路径是动态的，但可选范围明确（比如多语言文件只有几种），可以先预导入所有可能的JSON，再用对象映射实现同步获取：

// 预导入所有可能的语言文件
import zhCN from './zh-CN.json'
import enUS from './en-US.json'
import jaJP from './ja-JP.json'

// 建立路径到模块的映射
const langMap = {
  'zh-CN': zhCN,
  'en-US': enUS,
  'ja-JP': jaJP
}

// 动态路径获取，同步直接用
const path = 'zh-CN' // 这里的path可以是动态变量
const lang = langMap[path]
console.log(lang.welcome) // 直接访问索引

这种方案完全同步，没有异步开销，适合可选值不多的场景。

3. 使用Vite的import.meta.glob（动态路径且范围广） #

Vite提供了import.meta.glob API支持批量匹配文件，通过eager: true选项可以实现同步加载，最接近require的动态同步效果：

// 同步加载所有符合匹配规则的JSON文件
// 注意：匹配路径是相对于当前文件的相对路径
const langModules = import.meta.glob('./lang/*.json', { eager: true })

// 根据动态路径获取对应的JSON模块
const path = 'zh-CN'
const lang = langModules[`./lang/${path}.json`].default
// 直接使用lang的索引，比如lang.login

• 匹配规则支持通配符，比如./**/*.json匹配所有子目录下的JSON文件
• eager: true会让Vite在构建时就把所有匹配到的文件打包，运行时直接同步获取模块

4. 异步封装（完全动态路径的妥协方案） #

如果路径完全动态且无法提前预加载，只能接受异步，但可以封装成函数简化使用：

async function loadLang(path) {
  try {
    const module = await import(`./${path}.json`)
    return module.default
  } catch (err) {
    console.error('加载JSON文件失败:', err)
    return {}
  }
}

// 使用时在异步环境中调用
async function init() {
  const lang = await loadLang('zh-CN')
  console.log(lang.home) // 访问索引
}
init()

这种方案需要在异步函数中使用await，适合无法提前确定路径的场景，比如用户自定义的文件路径。

内容的提问来源于stack exchange，提问作者dy-xiaodong2022