Nuxt 4 國際化 i18n 架構與多語言路由策略

2026年5月10日 18:07

2.79K

本文完整呈現基於 @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
    }
})