NuxtI18n

[ PS ]

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

[ 安裝及配置準備 ]

1. 安裝模組

     npx nuxi@latest module add i18n
   

2. 配置nuxt模組，nuxt.config.ts

     modules: [
       [
         '@nuxtjs/i18n',
         {
           vueI18n: './i18n.config.ts'
         }
       ]
     ]
   

   • 這時候你可能會發現，沒有安裝 @nuxtjs/i18n 這個依賴，切記目前不要去手動安裝，因為在帶有新功能的穩定正式版本釋出之前，我們要透過 edge 通道來獲取相關依賴，如果這時候手動去安裝了，會在 package.lock.json中留下相關記錄，待會兒還需要手動去處理修改，就很麻煩了。
3. 在專案根目錄建立 i18n.config.ts 檔案備用
4. 修改專案的 package.json 檔案，新增 @nuxtjs/i18n 的 edge 通道，準備安裝相關依賴

     {
       "devDependencies": {
         "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
       }
     }
   

5. 安裝相關依賴

     npm i
   

6. 在根目錄建立 lang 目錄，並在裡面新增語言配置檔案 en.json 和 zh.json

     mkdir lang
     cd lang
     touch en.json zh.json
   

7. 分別在語言配置檔案中新增配置內容

• zh.json

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

• en.json

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

8. 配置 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>