Petua untuk menggunakan i18n untuk melaksanakan penukaran berbilang bahasa dalam Vue

Dengan pembangunan pengantarabangsaan yang berterusan, semakin banyak laman web dan aplikasi perlu menyokong fungsi penukaran berbilang bahasa. Sebagai rangka kerja bahagian hadapan yang popular, Vue menyediakan pemalam yang dipanggil i18n yang boleh membantu kami mencapai penukaran berbilang bahasa. Artikel ini akan memperkenalkan teknik biasa untuk menggunakan i18n untuk mencapai penukaran berbilang bahasa dalam Vue.

Langkah 1: Pasang pemalam i18n

Mula-mula, kita perlu memasang pemalam i18n menggunakan npm atau benang. Masukkan arahan berikut dalam baris arahan:

npm install vue-i18n --save

atau

yarn add vue-i18n

Langkah 2: Konfigurasikan i18n

Dalam projek Vue, kita perlu memperkenalkan i18n dalam main.js dan melaksanakan beberapa konfigurasi asas. Contohnya adalah seperti berikut:

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')
    }
})

Dalam kod di atas, kami membuat instantiate objek i18n melalui new VueI18n() dan menentukan tempat bahasa lalai 'en-us' dan bahasa alternatif fallbackLocale ialah 'zh-cn'. Atribut mesej ialah objek yang menyenaraikan semua bahasa yang perlu disokong dan menggunakan fail JSON untuk menyimpan maklumat terjemahan yang sepadan dengan setiap bahasa. 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>{{$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()

Dalam kod di atas, kami menyimpan maklumat terjemahan bahasa Cina dalam fail locales/zh-cn.json dan maklumat terjemahan bahasa Inggeris dalam fail locales/en-us.json. Seterusnya, kita perlu mengisi maklumat terjemahan untuk kedua-dua fail ini masing-masing.

Langkah 3: Isikan maklumat terjemahan bahasa

Dalam fail locales/zh-cn.json, kita boleh menulis maklumat terjemahan seperti berikut:

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

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

Dalam fail locales/en-us.json, kita boleh menulis maklumat terjemahan seperti berikut Kaedah untuk menulis maklumat terjemahan: 🎜rrreee🎜Dalam contoh di atas, "Selamat Datang" dan "Hello" ialah kunci terjemahan, dan rentetan berikut ialah teks terjemahan (nilai). 🎜🎜Nota: Untuk mendapatkan maklumat terperinci tentang cara menterjemah kandungan anda, sila cari sendiri sumber terjemahan. 🎜🎜Langkah 4: Gunakan maklumat terjemahan🎜🎜Setelah i18n telah dikonfigurasikan, kami boleh menggunakan maklumat terjemahan dalam komponen Vue.js. Dalam kod sampel, kami menggunakan kaedah $t() untuk melaksanakan terjemahan. Kita hanya perlu menambah kaedah $t() sebelum teks yang perlu diterjemahkan. 🎜🎜Kod sampel adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, kita dapati bahawa kedua-dua blok teks diterjemahkan menggunakan kaedah $t() dan "Selamat Datang" dan "Hello" sudah ditakrifkan dalam fail JSON Baik kunci terjemahan. 🎜🎜Jika anda ingin menukar bahasa semasa, anda boleh menentukan kaedah dalam komponen untuk mengemas kini harta $i18n.locale. Sebagai contoh, jika anda ingin menukar kepada bahasa Inggeris, anda boleh melakukannya dengan kod berikut: 🎜rrreee🎜Langkah 5: Gunakan gula sintaks🎜🎜Vue-i18n juga menyediakan beberapa gula sintaks untuk memudahkan pelaksanaan beberapa kes penggunaan biasa. 🎜🎜Sebagai contoh, kita boleh menggunakan kaedah $t() untuk memaparkan teks terjemahan dengan pembolehubah. Contohnya: 🎜rrreee🎜Dalam contoh di atas, kami menggunakan kaedah data() komponen Vue untuk mentakrifkan pembolehubah bernama Nama pengguna dan kemudian merujuk pembolehubah dalam parameter kedua kaedah $t(). Contohnya, menterjemah teks secara dinamik seperti "Selamat Datang, Alice!" 🎜🎜Ringkasan🎜🎜Menggunakan pemalam i18n ialah kaedah popular untuk melaksanakan penukaran berbilang bahasa dalam Vue. Selepas melengkapkan konfigurasi dan maklumat terjemahan bahasa menggunakan pemalam i18n, kami boleh menggunakan kaedah $t() dalam komponen untuk memaparkan teks terjemahan. Semasa pelaksanaan, gula sintaksis juga boleh digunakan untuk memudahkan kes penggunaan biasa. Saya harap artikel ini dapat membantu anda lebih memahami cara menggunakan i18n dalam Vue.js. 🎜

Atas ialah kandungan terperinci Petua untuk menggunakan i18n untuk melaksanakan penukaran berbilang bahasa dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!