Vue i18n无法加载本地化JSON文件问题排查求助

1. 确认JSON文件格式与导出逻辑 #

确保本地化JSON文件是标准格式（双引号、无 trailing commas），且文件后缀为.json。部分ESM打包器环境中，JSON导入可能直接返回对象而非带.default的模块，可在导入时做兼容判断：

const localeContent = locales(key)
const messages = localeContent.default || localeContent

2. 修正批量导入的实现方式 #

根据你使用的打包工具调整导入逻辑：

• Vite环境：使用import.meta.glob批量导入

  const messages = Object.fromEntries(
    Object.entries(import.meta.glob('./locales/*.json', { eager: true })).map(([path, module]) => {
      const lang = path.replace(/^\.\/locales\/(.*)\.json$/, '$1')
      return [lang, module.default || module]
    })
  )
  

• Webpack环境：使用require.context批量导入

  const messages = {}
  const localeFiles = require.context('./locales', false, /\.json$/)
  localeFiles.keys().forEach(key => {
    const lang = key.replace(/^\.\/(.*)\.json$/, '$1')
    messages[lang] = localeFiles(key).default || localeFiles(key)
  })
  

3. 检查i18n初始化配置 #

确保创建i18n实例时正确传入消息对象，Vue 3 + vue-i18n@9+需注意ESM模式配置：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false, // ESM模式需开启此配置
  locale: 'en',
  fallbackLocale: 'en',
  messages // 确认此处正确传入加载后的本地化消息
})

4. 排查打包器的JSON处理配置 #

• Vite：检查vite.config.js是否有自定义JSON处理插件，确保未禁用默认的JSON导入行为
• Webpack：确认webpack.config.js中module.rules对JSON的loader配置正常，无异常拦截逻辑

5. 验证本地化键名的正确性 #

确认en.json中确实存在nav.home层级的键值，例如：

{
  "nav": {
    "home": "Home"
  }
}

避免键名拼写错误或嵌套层级不匹配。

6. 清除缓存重新构建 #

删除打包器缓存目录（如Vite的node_modules/.vite、Webpack的dist），重新执行npm run dev或npm run build，排除缓存导致的模块加载异常。

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