本文完整呈现基于 @nuxtjs/i18n v10 的三语言(zh-CN/zh-TW/en)国际化方案,从 prefix_except_default 路由策略、浏览器语言检测与 Cookie 持久化,到 Naive UI 组件库的 locale 联动和 SEO hreflang 优化。基于 @nuxtjs/i18n v10,详解三语言(zh-CN / zh-TW / en)系统的路由策略、语言检测、Cookie 持久化和 SSR 协同机制一、i18n 配置全解析
i18n: {
defaultLocale: 'zh-cn',
strategy: 'prefix_except_default',
langDir: 'locales',
locales: [
{ code: 'zh-cn', name: '中文', file: 'zh_CN.json' },
{ code: 'zh-tw', name: '中文(繁體)', file: 'zh_TW.json' },
{ code: 'en', name: 'English', file: 'en.json' }
],
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'salong_i18n_redirected',
redirectOn: 'root',
fallbackLocale: 'zh-cn'
}
}
路由策略:prefix_except_default
| URL | 语言 | 说明 |
|---|
/ | 简体中文 (zh-cn) | 默认语言不带前缀 |
/about | 简体中文 | 默认语言所有路由无前缀 |
/zh-tw | 繁体中文 | 繁体带前缀 |
/en | English | 英文带前缀 |
优势:中文用户直接访问 /,URL 简洁友好;其他语言通过前缀自动路由;搜索引擎清晰区分版本。
二、语言资源文件
i18n/locales/
├── zh_CN.json # 简体中文翻译
├── zh_CN_player.ts # 视频播放器中文独立模块
├── zh_TW.json # 繁体中文翻译
├── zh_TW_player.ts # 视频播放器繁文独立模块
└── en.json # 英文翻译
三、浏览器语言检测
用户首次访问 /
├── 读取 Cookie: salong_i18n_redirected
│ ├── 存在 → 使用 Cookie 中的语言
│ └── 不存在 ↓
├── 检测浏览器 Accept-Language 头
│ ├── zh-TW → 重定向到 /zh-tw
│ ├── en → 重定向到 /en
│ └── 其他 → 使用默认语言 zh-cn
└── 设置 Cookie: salong_i18n_redirected
| 配置项 | 值 | 说明 |
|---|
useCookie | true | 记住语言选择 |
cookieKey | salong_i18n_redirected | 自定义 Cookie 名 |
redirectOn | root | 仅在根路径检测 |
fallbackLocale | zh-cn | 默认回退语言 |
四、与 Naive UI 国际化联动
const naiveLocale = computed(() => {
switch (locale.value) {
case 'zh-cn': return { locale: zhCN, dateLocale: dateZhCN }
case 'zh-tw': return { locale: zhTW, dateLocale: dateZhTW }
default: return null // en 使用默认
}
})
五、SEO 与多语言
- 自动生成
hreflang 标签
- Schema.org 多语言适配
- 页面级 meta alias:
['/en/index', '/zh-cn/index', '/zh-tw/index']
六、总结
| 维度 | 实现方式 |
|---|
| 路由策略 | prefix_except_default:默认语言无前缀 |
| 语言检测 | Cookie 优先 → Accept-Language → 默认 zh-cn |
| 组件联动 | Naive UI 语言包自动跟随 i18n locale |
| SEO | hreflang + Schema.org 多语言 |
| SSR 安全 | 服务端 Cookie/Header 解析确保水合一致 |