Nuxt 3 中的语言切换器与 nuxtjs/i18n

Question

这是 Nuxt 3 与 @nuxtjs/i18n

套餐：

//package.json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^8.3.0",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3"
  }
}

配置：

//nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    locales: [
      {
        code: 'en',
        name: 'English',
      },
      {
        code: 'fr',
        name: 'Français'
      }
    ],
    strategy: 'prefix',
    defaultLocale: 'en',
    customRoutes: 'config',
    pages: {
      about: {
        en: '/about',
        fr: '/a-propos',
      },
    },
  }
})

i18n：

//i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome',
      home: 'Home',
      about: 'About'
    },
    fr: {
      welcome: 'Bienvenue',
      home: 'D’accuei',
      about: 'À Propos'
    }
  }
}))

成分：

//components/AppHeader.vue
<template>
  <div class="p-4 mb-4 bg-green-300">
    <div>
      <p> 
        <a href="#" v-for="locale in availableLocales" :key="locale.code" @click.prevent.stop="setLocale(locale.code)">
          set content to {{ locale.name }} ({{ locale.code }})
        </a>
      </p>
      <p>
        <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
          switch path to {{ locale.name }} ({{ locale.code }})
        </NuxtLink>
      </p>
    </div>
    <nav class="mt-8">
      <ul class="flex gap-2">
        <li><NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink></li>
        <li><NuxtLink :to="localePath('about')"> {{ $t('about') }}</NuxtLink></li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
const { t, locale, locales, setLocale } = useI18n()
const localePath = useLocalePath()
const switchLocalePath = useSwitchLocalePath()
const availableLocales = computed(() => locales.value.filter(l => l.code !== locale.value))
</script>

我需要将网址更改为其他语言网址

<p>
  <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
    switch path to {{ locale.name }} ({{ locale.code }})
  </NuxtLink>
</p>

如果我的网址是

/en/

，它应该切换到

/fr/

，如果我的网址是

/en/about/

，它应该切换到

/fr/a-propos/

，反之亦然 我将创建的其他页面也需要这个，我只是尝试用一页来简化它。

有人能找出我的错误吗？

Answer 1

我刚刚测试了你的代码，它似乎按预期工作： https://github.com/adesombergh/so-lang-switcher

请注意，某些浏览器（例如 Safari）默认会隐藏完整的站点路径，仅显示域。您可以在首选项 > 高级中禁用此功能。