Nuxt 3 i18n路由偶发异常：useLocalePath部分链接缺失语言前缀

问题现象 #

• 产品详情组件内使用useLocalePath生成的链接，在EN、NL、DE语言下均能正确添加语言前缀
• 菜单区域的链接在NL/DE语言下缺失语言前缀，仅英文正常；荷兰语仅contact链接正常，德语所有菜单链接均丢失前缀
• 手动输入任意语言前缀的URL，页面均可正常加载；Nuxt Inspector的routes标签显示各语言路由配置完整

代码示例 #

正常工作的组件代码 #

<script setup>
const localePath = useLocalePath()
</script>

<NuxtLink :to="localePath(`/laptops/${slugify(productBrand)}/${slugify(productModel)}/${productId}`)" :title="productName" class="flex flex-col md:flex-row">
content
</NuxtLink>

失效的菜单链接代码 #

<NuxtLink :to="localePath('/search')" title="">
  <img src="/temp/header.png" width="1481" height="612" alt="" class="w-full" />
</NuxtLink>

search页面的国际化路由配置 #

defineI18nRoute({
  paths: {
    en: '/search',
    nl: '/zoeken',
    de: '/suche',
  }
})

项目配置信息 #

依赖版本 #

"dependencies": {
    "@nuxtjs/device": "3.2.4",
    "@nuxtjs/i18n": "9.1.0",
    "nuxt-tiptap-editor": "^2.0.0",
    "nuxt": "^3.14.1592",
    "nuxt-storage": "^1.2.2",
    "vue": "latest",
    "vue-router": "latest"
},

nuxt.config.ts关键配置 #

modules: [
    '@nuxtjs/i18n',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/device',
    "nuxt-tiptap-editor"
],
i18n: {
  legacy: false,
  globalInjection: true,
  strategy: 'prefix',
  defaultLocale: 'en',
  locales: [
    {
      code: "en",
      iso: "en_EN",
      name: 'English'
    },
    {
      code: "nl",
      iso: "nl_NL",
      name: 'Nederlands'
    },
    {
      code: "de",
      iso: "de_DE",
      name: 'Deutsch'
    },
  ],
  vueI18n: './i18n.config.ts'
}

i18n.config.ts关键配置 #

import en from "./locales/en.json"
import nl from "./locales/nl.json"
import de from "./locales/de.json"

export default defineI18nConfig(() => ({
    legacy: false,
    globalInjection: true,
    strategy: 'prefix',
    defaultLocale: 'en',
    locales: [
        {
            code: "en",
            iso: "en_EN",
            name: 'English'
        },
        {
            code: "nl",
            iso: "nl_NL",
            name: 'Nederlands'
        },
        {
            code: "de",
            iso: "de_DE",
            name: 'Deutsch'
        },
    ],
    messages: {
        en: en,
        nl: nl,
        de: de,
    },
}))

问题根源及解决方案 #

1. 路由匹配方式错误 #

使用localePath('/search')硬编码路径时，SSR阶段可能无法正确关联defineI18nRoute配置的多语言路径，导致无法生成带前缀的链接。

• 解决：改用路由名称调用localePath，比如localePath('search')（对应pages/search.vue自动生成的路由名），确保i18n精准匹配国际化路由配置。

2. 组件上下文初始化时机问题 #

菜单组件作为布局组件一部分可能被提前实例化，useLocalePath获取的locale上下文未正确初始化，切换语言后也未触发响应式更新。

• 解决：
  • 在菜单组件中显式通过useI18n()获取locale信息，或使用全局注入的$i18n对象访问当前语言
  • 若菜单数据为异步加载，需在locale切换时重新触发链接生成逻辑

3. 依赖版本兼容性冲突 #

@nuxtjs/i18n@9.1.0与nuxt@3.14.1592存在潜在兼容性问题，SSR阶段会出现locale路径生成异常。

• 解决：升级@nuxtjs/i18n到最新稳定补丁版，或降级Nuxt到与i18n明确兼容的版本。

4. 全局注入配置重复 #

nuxt.config.ts和i18n.config.ts均配置了globalInjection: true，导致SSR阶段上下文冲突。

• 解决：移除其中一处的globalInjection配置，推荐仅在nuxt.config.ts的i18n配置中保留该选项。

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