如何在 Vue 中使用 Vue-i18n 进行国际化？

Vue-i18n 是一個用於在 Vue.js 中進行國際化的插件，它可以讓你在不同的語言環境中提供本地化的內容。本文將介紹如何在 Vue 中使用 Vue-i18n 進行國際化。

安裝 Vue-i18n

首先，你需要安裝 Vue-i18n，可以使用 npm 或 yarn 來安裝：

npm install vue-i18n

yarn add vue-i18n

設定 Vue-i18n

接下來，你需要在你的 Vue 應用程序中設定 Vue-i18n，可以使用以下程式碼：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 設定語言
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})

new Vue({
  i18n
}).$mount('#app')

在上面的程式碼中，我們使用 Vue.use() 方法來使用 Vue-i18n，並且使用 VueI18n 類別來建立一個新的 i18n 實例，並且設定 locale 屬性為 en，表示我們要使用英文作為預設語言。然後，我們可以在 messages 屬性中設定不同語言的文字，在這裡我們設定了英文和日文的文字。

使用 Vue-i18n

現在，我們可以在 Vue 應用程序中使用 Vue-i18n 來提供本地化的內容，可以使用 $t() 方法來取得本地化的文字：

在上面的程式碼中，我們使用 $t() 方法來取得本地化的文字，它會根據當前的語言環境來取得對應的文字，在這裡，如果當前的語言環境是英文，則會取得 hello world，如果是日文則會取得 こんにちは、世界。

結論

在本文中，我們介紹了如何在 Vue 中使用 Vue-i18n 進行國際化，Vue-i18n 可以讓你在不同的語言環境中提供本地化的內容，使用起來也非常簡單，只需要安裝 Vue-i18n 並且設定對應的語言，然後就可以使用 $t() 方法來取得本地化的文字。

更多資源

如果你想要了解更多關於 Vue-i18n 的資訊，可以參考以下資源：

Categorized in:

vuevue.js

Tagged in:

,