我如何在nuxt3配置多语言

我们先罗列出项目用到的包版本，因为版本不一致可能出现配置的不同

  "nuxt": "^3.16.0",
  "@nuxt/content": "^2.13.4",
  "@nuxtjs/i18n": "9.5.4",

i18n 应该如何配置？

我们可以再 nuxt.config.ts 文件中配置 i18n,记得在 modules 配置中引入@nuxtjs/i18n包名

  i18n: {
      vueI18n: './i18n.config.js', // custom path example
      defaultLocale: 'en',
      locales: ['zh', 'en'],
      // 启用浏览器语言检测
      detectBrowserLanguage: {
        useCookie: true,      // 使用 Cookie 存储用户选择（避免重复检测）
        cookieKey: 'i18n_redirected', // Cookie 名称
        redirectOn: 'root',   // 仅在访问根路径时重定向（如 `/`）
        alwaysRedirect: false, // 是否每次访问都检测（默认 false）
        fallbackLocale: 'en'  // 如果浏览器语言不匹配，回退到默认语言
      },
      strategy: 'prefix_except_default', // 默认语言没有前缀
    },

这里面有一个需要注意的问题是 vueI18n 配置文件的路径，默认需要在根目录的 i18n 文件夹中，你需要手动创建一个，这样我们的多语言才能生效, prefix_except_default 设置成了默认语言不需要加前缀，你还可以点击 strategy 了解更多的信息。 `

  i18n
   --i18n.config.js

i18n.config.js 配置了哪些内容？

以下我们以中英文为例：

import zh from '../locales/zh.js'
import en from '../locales/en.js'

const messages = {
  zh: zh,
  en: en,
}
export default defineI18nConfig(() => {
  return {
    legacy: false,
    locale: 'en',
    messages
  }
})

可以看到我们引入了两个文件，根目录中存在一个 locales的目录，里面有两种语言的配置文件,格式差不多是以下这样：

en.js

export default {
  home: {
    title: 'Home',
    meta: {
      description: 'Welcome to Yiming Yang\'s website. Here you can find articles, tips, learning resources and more information about Web Development, Artificial Intelligence, JavaScript, TypeScript, Node.js, Vue and Nuxt.',
    },
  }
}

zh.js

export default {
  home: {
    title: '首页',
    meta: {
      description: '欢迎来到我的杨义明网站。在这里你可以获取有关Web开发、人工智能、JavaScript、TypeScript、Node.js、Vue以及Nuxt的相关文章、技巧、学习资源等更多信息。',
    }
    }
}

vue模版文件如何使用多语言

第一种方式使用 t：

const { t } = useI18n()
useHead({
  title: `${t('home.title')} - ${t('seoData.title')}`,
  meta: [
    {
      name: 'description',
      content: t('home.meta.description'),
    },
  ],
})

第二种方式使用 $t:

   <h1 class="text-xl sm:text-4xl pb-2 font-bold">
      {{ $t('aboutPage.title') }}
    </h1>

跳转链接地址如何转换成多语言

const localePath = useLocalePath()

<NuxtLink :to="localePath('/')" :class="{ underline: $route.path === localePath('/') }">
      {{ $t('navbarData.homeTitle') }}
</NuxtLink>

可以看到我们使用localePath 获取多语言路径。

如何做页面中进行语言切换

实现思路是页面有个按钮，点击进行切换：

function toggleLanguage() {
  const targetLocale = locale.value === 'en' ? 'zh' : 'en'
  const currentPath = route.fullPath
  const targetPath = currentPath.replace(`/${locale.value}`, '') || '/'
  locale.value = targetLocale
  router.push(localePath(targetPath))
}

// 我们调用 toggleLanguage 方法
 <button
      @click="toggleLanguage"
    >
      <Icon :name="locale === 'en' ? 'twemoji:flag-china' : 'twemoji:flag-united-states'" size="20" />
    </button>

重点是我们使用 locale.value 来进行多语言切换，并且使用 localePath 获取多语言路径。

@nuxt/content 如何配置多语言

以下是content 目录多语言的配置：

content
  --blogs
    ....
  --zh
    --blogs
      ....

当我们要获取到正确的 content 内容的时候，要注意我们的多语言路径就可以，比如：

const { data } = await useAsyncData('home', () => {
  let path = `/blogs`
  if(locale.value !== defaultLocale){
    path = `${locale.value}/blogs`
  }
  return queryContent(path).sort({ _id: -1 }).find()
})

总结

好了，以上就是我配置 nuxt3 多语言的方式，希望能让你少走点弯路。

Table Of Content