NuxtI18n

anch發表於2024-08-18

[ PS ]

自寫這篇文件的時候，這個模組還在開發當中，沒有穩定的正式版本釋出，但是開放了edge通道，經測試可以正常使用。
官方文件

[ 安裝及配置準備 ]

安裝模組
```
  npx nuxi@latest module add i18n
```
配置nuxt模組，nuxt.config.ts
```
  modules: [
    [
      '@nuxtjs/i18n',
      {
        vueI18n: './i18n.config.ts'
      }
    ]
  ]
```
- 這時候你可能會發現，沒有安裝 @nuxtjs/i18n 這個依賴，切記目前不要去手動安裝，因為在帶有新功能的穩定正式版本釋出之前，我們要透過 edge 通道來獲取相關依賴，如果這時候手動去安裝了，會在 package.lock.json中留下相關記錄，待會兒還需要手動去處理修改，就很麻煩了。
在專案根目錄建立 i18n.config.ts 檔案備用
修改專案的 package.json 檔案，新增 @nuxtjs/i18n 的 edge 通道，準備安裝相關依賴
```
  {
    "devDependencies": {
      "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
    }
  }
```
安裝相關依賴
```
  npm i
```
在根目錄建立 lang 目錄，並在裡面新增語言配置檔案 en.json 和 zh.json
```
  mkdir lang
  cd lang
  touch en.json zh.json
```
分別在語言配置檔案中新增配置內容

zh.json

{
  "主頁": "主頁",
  "關於我們": "關於我們",
  "幫助": "幫助"
}

en.json

{
  "主頁": "Home",
  "關於我們": "AboutUs",
  "幫助": "Help"
}

配置 i18n.config.ts

  import en from './lang/en.json'
  import zh from './lang/zh.json'
  // 目前這個方法只有在 edge 通道中能正常使用，如果安裝了 @nuxtjs/i18n的v版本，是會顯示這個方法沒有定義。
  // 這裡的 edge 通道 和 edge 瀏覽器沒有半毛錢關係。透過官方提供的這個通道，可以拿到目前開發狀態中提供的最新狀態版本。可以搶先使用一些方便的功能。等到開發測試完成正式釋出就不用配置 edge 通道了。
  export default defineI18nConfig(()=> ({
    legacy: false,
    locale: 'zh', // 設定當前語言型別
    messages: { //設定語言配置
      en, zh
    }
  }))

到這裡，安裝和配置準備工作就完成了

[ 在模板中使用 ]

app.vue

<script setup>
const {locale, setLocale} = useI18n()
</script>
<template>
<h1>index page</h1>
<button @click="setLocale('zh')">中文</button>
<button @click="setLocale('en')">English</button>
<p>{{ $t('主頁') }}</p>
</template>