本文完整呈現基於 @nuxtjs/i18n v10 的三語言(zh-CN/zh-TW/en)國際化方案,從 prefix_except_default 路由策略、瀏覽器語言偵測與 Cookie 持久化,到 Naive UI 元件庫的 locale 聯動和 SEO hreflang 最佳化。一、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-tw | 繁體中文 | 繁體帶前綴 |
/en | English | 英文帶前綴 |
二、語言資源檔案
i18n/locales/
├── zh_CN.json # 簡體翻譯
├── zh_CN_player.ts # 播放器中文獨立模組
├── zh_TW.json # 繁體翻譯
├── zh_TW_player.ts # 播放器繁文獨立模組
└── en.json # 英文翻譯
三、瀏覽器語言偵測
使用者首次訪問 /
├── Cookie: salong_i18n_redirected → 使用已存語言
├── Accept-Language → zh-TW → /zh-tw, en → /en
└── 預設 → zh-cn
| 設定項 | 值 | 說明 |
|---|
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
}
})
五、SEO
- 自動生成
hreflang 標籤
- Schema.org 多語言適配
- 頁面級 alias:
['/en/index', '/zh-cn/index', '/zh-tw/index']
六、總結
| 維度 | 實現方式 |
|---|
| 路由策略 | prefix_except_default |
| 語言偵測 | Cookie → Accept-Language → 預設 |
| 元件聯動 | Naive UI 語言包自動跟隨 |
| SEO | hreflang + Schema.org |