Nuxt3中结合router.options.ts配置vue-i18n自定义路径问题

环境版本 #

• nuxt: ^3.0.0
• @nuxtjs/i18n-edge: 8.0.0-beta.4-27812700.b832f07

问题详情 #

期望访问/foo/EN/about格式的URL，该路径能正常加载页面，但$t('bla')始终显示默认语言（DE），无法切换为EN。控制台同时出现警告：[Vue Router warn]: No match found for location with path "/DE/EN/about"。

目前观察到的情况是：路径中已经包含locale参数，但i18n仍会自动为路径添加前缀，且该locale未被识别。尝试过在nuxt.config.ts中设置strategy: 'prefix'和'no_prefix'，也试过移除自定义路径中的:lang参数，但会触发404错误。需求是结合baseURL和i18n自动插入的locale部分来配置自定义路由。

相关配置文件 #

自定义路由文件 app/router.options.ts #

import type { RouterConfig } from '@nuxt/schema';
import About from '@/pages/about/about.vue';

export const locale = ':lang';

export default <RouterConfig>{
  routes: () => [
    {
      name: 'about',
      path: `/${locale}/about`,
      component: About,
    },
  ],
};

Nuxt配置文件 nuxt.config.ts（i18n相关部分） #

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  app: {
    baseURL: '/foo/',
  },
  srcDir: 'src/',
  modules: [
    [
      '@nuxtjs/i18n-edge',
      {
        defaultLocale: 'DE',
        detectBrowserLanguage: false,
        langDir: 'data/i18n/',
        locales: [
          {
            code: 'DE',
            file: 'de-DE.json',
            iso: 'de-DE',
          },
          {
            code: 'EN',
            file: 'en-GB.json',
            iso: 'en-GB'
          },
        ],
        parsePages: false,
        strategy: 'prefix',
        vueI18n: {
          legacy: false,
          locale: 'DE',
        },
        vueI18nLoader: true,
      },
    ],
  ],
});

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