Nuxt 3 国际化配置与最佳实践指南

npm install @nuxtjs/i18n
## 或使用 yarn
yarn add @nuxtjs/i18n

project/
├── i18n/
│   └── locales/          # 存放所有语言翻译文件
│       ├── zh-CN.json    # 简体中文翻译
│       └── en-US.json    # 美式英语翻译
└── nuxt.config.ts        # Nuxt配置文件

export default defineNuxtConfig({
  // 引入i18n模块
  modules: [
    '@nuxtjs/i18n'
  ],
  
  // i18n模块配置
  i18n: {
    // 定义支持的语言列表
    locales: [
      {
        code: 'zh-CN',      // 语言代码，将用于URL前缀
        name: '中文',        // 语言名称，可用于UI显示
        file: 'zh-CN.json', // 对应的翻译文件
        iso: 'zh-CN'        // ISO语言代码，用于hreflang等SEO标签
      },
      {
        code: 'en-US',
        name: 'English',
        file: 'en-US.json',
        iso: 'en-US'
      }
    ],
    
    // 翻译文件存放目录
    langDir: 'i18n/locales/',
    
    // 默认语言
    defaultLocale: 'zh-CN',
    
    // 路由策略
    strategy: 'prefix_except_default',
    
    // 浏览器语言检测配置
    detectBrowserLanguage: {
      useCookie: true,                // 使用Cookie记住用户语言偏好
      cookieKey: 'i18n_redirected',   // Cookie键名
      redirectOn: 'root',             // 仅在访问根路径时重定向
      alwaysRedirect: false,          // 仅在首次访问时重定向
      cookieSecure: false             // 开发环境设为false，生产环境建议设为true
    },
    
    // SEO优化
    seo: true,                        // 自动生成hreflang标签
    
    // 调试模式，开发时建议开启
    debug: process.env.NODE_ENV === 'development'
  }
})

{
  "nav": {
    "home": "首页",
    "about": "关于我们",
    "services": "服务",
    "contact": "联系我们"
  },
  "home": {
    "welcome": "欢迎来到我们的网站",
    "description": "这是一个使用Nuxt 3和@nuxtjs/i18n构建的多语言网站示例",
    "features": "核心特性"
  },
  "common": {
    "learn_more": "了解更多",
    "submit": "提交",
    "cancel": "取消"
  }
}

{
  "nav": {
    "home": "Home",
    "about": "About Us",
    "services": "Services",
    "contact": "Contact Us"
  },
  "home": {
    "welcome": "Welcome to Our Website",
    "description": "This is a multilingual website example built with Nuxt 3 and @nuxtjs/i18n",
    "features": "Core Features"
  },
  "common": {
    "learn_more": "Learn More",
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

<template>
  <div class="home-page">
    <!-- 在模板中直接使用$t函数 -->
    <h1>{{ $t('home.welcome') }}</h1>
    <p>{{ $t('home.description') }}</p>
    
    <!-- 带参数的翻译 -->
    <p>{{ $t('common.greeting', { name: 'Visitor' }) }}</p>
  </div>
</template>

<script setup>
// 在脚本中使用组合式API
const { t, locale, setLocale } = useI18n()

// 获取当前语言
console.log('当前语言:', locale.value) // 输出: zh-CN 或 en-US

// 在脚本中获取翻译文本
const featuresTitle = t('home.features')
</script>

// zh-CN.json
{
  "common": {
    "greeting": "欢迎，{name}！",
    "notification": "您有 {count} 条新消息"
  }
}

<!-- 模板中使用 -->
<p>{{ $t('common.greeting', { name: userName }) }}</p>
<p>{{ $t('common.notification', { count: unreadCount }) }}</p>

<!-- 脚本中使用 -->
<script setup>
const { t } = useI18n()
const userName = '用户'
const userGreeting = t('common.greeting', { name: userName })
</script>

<!-- components/LanguageSwitcher.vue -->
<template>
  <div class="language-switcher">
    <button 
      v-for="lang in availableLocales" 
      :key="lang.code"
      :class="{ active: lang.code === currentLocale }"
      @click="switchLanguage(lang.code)"
    >
      {{ lang.name }}
    </button>
  </div>
</template>

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

// 获取当前语言
const currentLocale = locale

// 获取所有可用语言
const availableLocales = getAvailableLocales()

// 切换语言
const switchLanguage = async (langCode) => {
  // 可以在这里添加加载状态
  await setLocale(langCode)
  // 语言切换后的操作，如滚动到顶部
  window.scrollTo(0, 0)
}
</script>

<style scoped>
.language-switcher {
  display: flex;
  gap: 0.5rem;
}

button {
  padding: 0.25rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

button.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}
</style>

pages/
├── index.vue        # 首页
├── about.vue        # 关于页面
└── contact.vue      # 联系页面

<!-- 链接到当前语言的关于页面 -->
<NuxtLink to="/about">
  {{ $t('nav.about') }}
</NuxtLink>

<!-- 链接到特定语言(英文)的关于页面 -->
<NuxtLink to="/about" :locale="en-US">
  English About Page
</NuxtLink>

<!-- 在脚本中生成国际化链接 -->
<script setup>
const { localePath } = useI18n()
// 生成当前语言的关于页面链接
const aboutUrl = localePath('/about')
// 生成指定语言的联系页面链接
const enContactUrl = localePath('/contact', { locale: 'en-US' })
</script>