Vue 中使用 i18n 實作多語言切換的技巧

隨著國際化的不斷發展，越來越多的網站和應用程式需要支援多語言切換功能。 Vue 作為一個流行的前端框架，提供了一個名為 i18n 的插件，可以幫助我們實現多語言切換。本文將介紹 Vue 中使用 i18n 實作多語言切換的常見技巧。

第一步：安裝 i18n 外掛程式

首先，我們需要使用 npm 或 yarn 安裝 i18n 外掛程式。在命令列中輸入以下命令：

npm install vue-i18n --save

或

yarn add vue-i18n

第二步：設定i18n

在Vue 專案中，我們需要在main.js 中引入i18n，並進行一些基本配置。範例如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'en-us', // 默认语言为英语
    fallbackLocale: 'zh-cn', // 如果当前语言没有在 locale 对象中找到，则使用 fallbackLocale 作为备选语言
    messages: {
        'zh-cn': require('./locales/zh-cn.json'),
        'en-us': require('./locales/en-us.json')
    }
})

在上述程式碼中，我們透過new VueI18n() 實例化了一個i18n 對象，並且指定了一個預設語言locale 為'en-us'，和一個備選語言fallbackLocale 為'zh-cn'。 messages 屬性是一個對象，用來列舉所有需要支援的語言，並用 JSON 檔案儲存各語言對應的翻譯資訊。

在上述程式碼中，我們將中文翻譯資訊保存在 locales/zh-cn.json 檔案中，將英文翻譯資訊保存在 locales/en-us.json 檔案中。接下來，我們需要分別對這兩份文件進行翻譯資訊的填寫。

第三步：填寫語言翻譯資訊

在locales/zh-cn.json 檔案中，我們可以按照以下方式編寫翻譯資訊：

{
    "Welcome": "欢迎使用 Vue",
    "Hello": "你好，世界！"
}

在locales/ en-us.json 檔案中，我們可以按照以下方式編寫翻譯訊息：

{
    "Welcome": "Welcome to Vue",
    "Hello": "Hello, world!"
}

在上述範例中，"Welcome" 和"Hello" 是翻譯的鍵（key），後面的字串則是翻譯後的文字（value）。

附註：有關如何翻譯您的內容的詳細信息，請自行查找翻譯資料。

第四步：使用翻譯訊息

一旦 i18n 已經配置好，我們就可以在 Vue.js 元件中使用翻譯訊息了。在範例程式碼中，我們使用 $t() 方法來實作翻譯。我們只需要在需要翻譯的文字前面加上 $t() 方法。

範例程式碼如下：

<template>
  <div>
    <h1 id="t-Welcome">{{$t('Welcome')}}</h1>
    <p>{{$t('Hello')}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

在上述程式碼中，我們可以發現兩個文字區塊都使用了$t() 方法進行了翻譯，而"Welcome" 和"Hello"則是在JSON 檔案中已經定義好的翻譯鍵。

如果你要更改目前語言，你可以在元件中定義一個方法來更新 $i18n.locale 屬性。例如，如果想切換為英文，可以透過下面的程式碼實現：

this.$i18n.locale = 'en-us'

第五步：使用語法糖

Vue-i18n 也提供了一些語法糖，簡化了一些常見用例的實現。

例如，我們可以使用 $t() 方法來顯示帶有變數的翻譯文字。例如：

<template>
  <div>
    <h1 id="t-Welcome-name-userName">{{ $t('Welcome', { name: userName }) }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userName: 'Alice'
    }
  },
}
</script>

在上述範例中，我們使用 Vue 元件的 data() 方法來定義一個名為 userName 的變量，然後在 $t() 方法的第二個參數中引用該變數。例如，動態翻譯出 "Welcome, Alice!" 這樣的文字。

總結

使用 i18n 外掛程式是實作 Vue 多語言切換的一種流行方法。使用 i18n 外掛程式完成設定和語言翻譯資訊的填寫後，我們就可以在元件中使用 $t() 方法來顯示翻譯文字。在實作過程中，也可以用語法糖來簡化常見的用例。希望本文能幫助您更能理解 Vue.js 中 i18n 的使用方法。

以上是Vue 中使用 i18n 實作多語言切換的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！