[筆記] HiSKIO 2020 Vue3 專業職人進階篇

章節連結

課程相關資訊
筆記
系列文章

前端框架御三家之一的 Vue，在 2020 年第四季迎來的第三代版本，代號為 One Piece。雖說已略為上手 2.0 版，決定藉由 HiSKIO 2020 Vue3 專業職人的課程，來加速自己的熟悉程度。這篇會筆記下在 i18N 多國語系切換。

本篇範圍：Chapter 9 ( i18n 多國語系切換 ) ，一共有 10 篇

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。

筆記

1. i18N 的基礎設定如下：

{
  modules: ['nuxt-i18n'],
  i18n:{
    locales: ['en','de'], // 目前有的語系
    defaultLocale: 'en', // 預設語系
    vueI18n:{
      fallbackLocale: 'en', // 參數沒有相關設定時，顯示的語系
      messages:{
        en:{
          welcome: 'Welcome'
        },
        de:{
          welcome: 'Willkommen'
        }
      } 
    }
  }
}

{

modules: ['nuxt-i18n'],

i18n:{

locales: ['en','de'], // 目前有的語系

defaultLocale: 'en', // 預設語系

vueI18n:{

fallbackLocale: 'en', // 參數沒有相關設定時，顯示的語系

messages:{

en:{

welcome: 'Welcome'

de:{

welcome: 'Willkommen'

}

2. 在模板中，可以直接用 {{ $t(‘keyName’) }} 的形式，將值給呈現出來。以上面例子而言就是 {{ $t(‘welcome’) }}
3. nuxt-i18n 中有提供 switchLocalePath 的方法來切換語系，同時有 localePath 的方法讓你在切換頁面時可以保留語系 (也可傳入第二個參數決定要不要更換語系)
4. $t 方法中，是可以傳入自定義參數的，像是 {{ $t(‘welcome’, { name: “Demo” }) }}。這對於以非同步拿回來的資料，相當實用。
5. 文字檔的拆分：可以新增一個 locales 資料夾，裏頭依照各語系名稱新增 js (如 en.js) ，並在 nuxt.config.js import 進來即可