5. 国际化配置

• 1. Nuxt 配置
• 2. 使用国际化

1. Nuxt 配置

如果没有特殊的国际化内容或 SEO 需求，可直接使用 no_prefix 模式。

export default defineNuxtConfig({
  i18n: {
    defaultLocale: 'zh',
    detectBrowserLanguage: {
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
      useCookie: true,
    },
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
      },
      {
        code: 'zh',
        iso: 'zh-CN',
        name: '简体中文',
      },
      {
        code: 'tw',
        iso: 'zh-TW',
        name: '繁體中文',
      },
      {
        code: 'ja',
        iso: 'ja-JP',
        name: '日本語',
      },
    ],
    strategy: 'no_prefix',
  },
  modules: [
    '@nuxtjs/i18n',
  ],
})

如果有特殊的国际化内容或 SEO 需求，可使用 prefix_except_default 模式。

2. 使用国际化

我们的国际化使用扁平的 YAML 方式配置，优点是能显著降低心智负担，同时做到细致切分，显著降低编译后客户端的国际化文件大小。

同时，全局的国际化配置仍然有效，使用 $t() 即可翻译任何全局配置的国际化信息。

在需要配置国际化信息的 Vue 页面或组件中，使用 YAML 语法配置：

<script setup lang="ts">
const { t } = useI18n({ useScope: 'local' })
</script>

<template>
  <h1>{{ t('title') }}</h1>
</template>

<i18n lang="yaml">
en:
  title: "Hello World"
zh:
  title: "你好，世界"
tw:
  title: "你好，世界"
ja:
  title: "こんにちは、世界"
</i18n>