Nuxt 3中@nuxtjs/i18n语言切换路径异常问题排查

你的核心问题是switchLocalePath无法根据自定义页面路由生成正确的语言切换路径，以下是具体排查点和修复步骤：

1. 页面组件路由关联缺失 #

在@nuxtjs/i18n v8中，仅在nuxt.config.ts配置自定义路由可能不足以让switchLocalePath正确识别关联关系，需要在对应页面组件中显式定义路由映射：

步骤：在pages/about.vue中添加路由定义 #

<script setup>
defineI18nRoute({
  paths: {
    en: '/about',
    fr: '/a-propos'
  }
})
</script>

这个配置会将页面组件与你在nuxt.config.ts中设置的自定义路由绑定，确保switchLocalePath能正确匹配到对应语言的路径。

2. 修正翻译文本拼写错误（规范项） #

在i18n.config.ts中，法语的home翻译存在拼写错误，修正为：

fr: {
  welcome: 'Bienvenue',
  home: 'D’accueil', // 原拼写为D’accuei
  about: 'À Propos'
}

3. 验证switchLocalePath返回值 #

可以在组件模板中临时打印switchLocalePath的返回结果，确认是否生成了正确路径：

<p>调试路径：{{ switchLocalePath('fr') }}</p>

如果当前在/en/about页面，正确返回值应为/fr/a-propos；如果在/en/页面，返回值应为/fr/。

4. 补充首页路由定义（可选） #

在nuxt.config.ts的i18n.pages中补充首页路由配置，避免潜在的路径匹配问题：

i18n: {
  // ...其他配置
  pages: {
    index: {
      en: '/',
      fr: '/'
    },
    about: {
      en: '/about',
      fr: '/a-propos',
    },
  },
}

5. 清除缓存重启项目 #

修改配置后，执行以下命令清除Nuxt缓存并重启开发服务：

rm -rf .nuxt node_modules package-lock.json
npm install
npm run dev

完成以上步骤后，switchLocalePath应该能正确生成对应语言的自定义路径，实现/en/about→/fr/a-propos、/en/→/fr/的跳转。

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