Nuxt3中nuxt/i18n路由别名未添加英文前缀问题

问题场景 #

使用Nuxt3搭配nuxt/i18n，默认语言设为ar，英文en作为第二语言。在test.vue页面通过definePageMeta设置路由别名/testExtend后，英文版本的别名未自动添加/en前缀，导致生成重复的/testExtend路由（预期应为/en/testExtend），且已启用experimental.scanPageMeta: true。

解决方案 #

1. 优先升级依赖版本 #

此问题大概率是nuxt/i18n早期版本的兼容性bug，建议先升级到最新稳定版：

# npm
npm update nuxt @nuxtjs/i18n

# yarn
yarn upgrade nuxt @nuxtjs/i18n

# pnpm
pnpm update nuxt @nuxtjs/i18n

升级后重启Nuxt服务，检查路由生成是否恢复正常。

2. 自定义路由扩展自动补全前缀 #

如果升级后问题仍存在，可在nuxt.config.ts中通过i18n.routes.extendRoutes钩子，为非默认语言的路由别名自动添加语言前缀：

export default defineNuxtConfig({
  experimental: {
    scanPageMeta: true
  },
  i18n: {
    locales: [
      { code: 'ar', iso: 'ar-EG', name: 'العربية' },
      { code: 'en', iso: 'en-US', name: 'English' }
    ],
    defaultLocale: 'ar',
    strategy: 'prefix_except_default', // 保持默认语言无前缀的策略
    routes: {
      extendRoutes: (routes) => {
        routes.forEach(route => {
          // 仅处理nuxt/i18n生成的英文路由（路由name带__en后缀）
          if (route.name?.endsWith('__en') && route.alias) {
            // 给别名统一添加/en前缀
            route.alias = route.alias.map(alias => `/en${alias}`)
          }
        })
      }
    }
  }
})

3. 页面级动态生成别名 #

也可以在test.vue页面中，根据当前语言动态生成对应前缀的别名：

<script setup>
const { locale } = useI18n()

definePageMeta({
  alias: computed(() => {
    return locale.value === 'en' ? ['/en/testExtend'] : ['/testExtend']
  })
})
</script>

注意：该方式需确保组件实例化时能正确获取当前locale，服务端渲染场景下需验证生效情况。

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