Cara menggunakan Vue untuk pengantarabangsaan dan penukaran berbilang bahasa

Cara menggunakan Vue untuk pengantarabangsaan dan penukaran berbilang bahasa

Pengenalan:
Dengan perkembangan globalisasi, banyak tapak web atau aplikasi memerlukan sokongan untuk berbilang bahasa untuk memenuhi keperluan pengguna yang berbeza. Dalam rangka kerja Vue, kami boleh melaksanakan pengantarabangsaan dan penukaran berbilang bahasa dengan mudah. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue-i18n untuk melaksanakan pengantarabangsaan dan penukaran berbilang bahasa serta memberikan contoh kod yang sepadan.

1. Pasang dan konfigurasikan Vue-i18n
Mula-mula, kita perlu memasang pemalam Vue-i18n. Jalankan arahan berikut dalam direktori akar projek:

npm install vue-i18n --save

Selepas pemasangan selesai, perkenalkan Vue-i18n dalam fail main.js dan konfigurasikannya.

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

const i18n = new VueI18n({
  locale: 'en', //默认语言为英文
  messages: {
    'en': require('./locales/en.json'), //英文语言包
    'zh': require('./locales/zh.json') //中文语言包
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Dalam kod di atas, kami mula-mula memperkenalkan pemalam Vue-i18n dan menggunakannya melalui kaedah Vue.use().
Seterusnya, contoh VueI18n telah dibuat dan dikonfigurasikan. Antaranya, atribut locale menentukan bahasa lalai sebagai bahasa Inggeris dan atribut mesej mengandungi pek bahasa untuk bahasa yang berbeza.
Akhir sekali, dengan menghantar objek i18n kepada pilihan i18n bagi contoh Vue, keseluruhan aplikasi boleh mengakses objek i18n.

2. Buat fail pek bahasa
Dalam kod dalam langkah sebelumnya, kami memperkenalkan dua fail pek bahasa: en.json dan zh.json. Digunakan untuk menyimpan teks terjemahan Inggeris dan Cina masing-masing.
Kami mencipta folder locales dan mencipta fail en.json dan zh.json di bawah folder ini. Kandungannya adalah seperti berikut:

en.json:

{
  "home": "Home",
  "about": "About",
  "contact": "Contact"
}

zh.json:

{
  "home": "首页",
  "about": "关于我们",
  "contact": "联系我们"
}

Kandungan di atas mentakrifkan teks terjemahan yang sepadan bagi tiga item terjemahan "home", "about" dan "contact" masing-masing.

3 Gunakan teks terjemahan dalam komponen
Dalam komponen Vue, kita boleh mendapatkan teks terjemahan yang sepadan melalui kaedah ini.$t().

<template>
  <div>
    <h1>{{ $t('home') }}</h1>
    <p>{{ $t('about') }}</p>
    <a>{{ $t('contact') }}</a>
  </div>
</template>

Dalam kod di atas, teks terjemahan yang sepadan dengan "rumah" diperoleh melalui {{ $t('home') }} dan diterjemahkan sebagai tajuk halaman. Begitu juga, kita juga boleh menggunakan {{ $t('about') }} dan {{ $t('contact') }} untuk mendapatkan teks terjemahan item terjemahan lain dan memaparkannya ke dalam halaman.

4. Tukar bahasa
Pemalam Vue-i18n juga menyediakan fungsi tambahan ini.$i18n.locale untuk mendapatkan dan menetapkan tempat semasa. Dengan menukar nilai tempat, kita boleh mencapai penukaran berbilang bahasa.

<template>
  <div>
    <select v-model="$i18n.locale">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  </div>
</template>

Kod di atas mencipta senarai lungsur di mana pengguna boleh menukar tempat semasa dengan memilih pilihan yang berbeza. Kaitkan senarai juntai bawah dengan ini.$i18n.locale melalui arahan v-model untuk mencapai pengikatan dua hala.

Ringkasan:
Artikel ini memperkenalkan cara menggunakan pemalam Vue-i18n untuk mencapai pengantarabangsaan dan penukaran berbilang bahasa. Mula-mula, kami memasang dan mengkonfigurasi pemalam Vue-i18n. Seterusnya, fail pek bahasa dicipta dan kaedah this.$t digunakan dalam komponen untuk mendapatkan teks terjemahan. Akhir sekali, dengan menggunakan ini.$i18n.locale untuk menukar bahasa, fungsi penukaran berbilang bahasa dilaksanakan. Saya harap artikel ini akan membantu semua orang dalam melaksanakan pengantarabangsaan dan penukaran berbilang bahasa dalam projek Vue.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk pengantarabangsaan dan penukaran berbilang bahasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!