@nuxtjs/i18n开发环境正常但生产构建报错求解决

可能原因 #

• 生产构建阶段i18n实例初始化时机晚于组件渲染，导致组件调用全局$t时实例尚未挂载完成
• rc.4版本属于预发布版本，存在全局注入$t未正确绑定的已知不稳定问题

解决方案 #

1. 改用组合式API替代全局$t #

在组件中通过useI18n显式获取翻译实例，避免依赖全局注入：

<script setup>
const { t } = useI18n()
</script>

<template>
  <div>{{ t('Categories') }}</div>
</template>

2. 延迟组件渲染直到i18n就绪 #

在根布局或入口组件中添加判断，确保i18n初始化完成后再渲染子内容：

<template>
  <div v-if="$i18n">
    <NuxtPage />
  </div>
</template>

3. 升级到稳定版本 #

预发布版本存在兼容性问题，建议升级到最新稳定版：

npm install @nuxtjs/i18n@latest

4. 拆分语言包文件 #

将messages拆分到单独的JSON文件，避免构建时静态分析导致的加载异常：

• 创建locales/en.json：

{
  "Categories": "Categories"
}

• 创建locales/fa.json：

{
  "Categories": "دسته‌بندی‌ها"
}

• 修改i18n配置：

export default defineI18nConfig(() => ({
  legacy: false,
  globalInjection: true,
  locale: "fa",
  messages: {
    en: () => import('~/locales/en.json'),
    fa: () => import('~/locales/fa.json')
  },
}));

5. 关闭全局注入并显式引入 #

禁用全局注入，在需要翻译的组件中手动引入useI18n：

export default defineI18nConfig(() => ({
  legacy: false,
  globalInjection: false,
  locale: "fa",
  messages: {
    en: {
      Categories: "Categories",
    },
    fa: {
      Categories: "دسته‌بندی‌ها",
    },
  },
}));

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