Cara melaksanakan penukaran dan pengantarabangsaan berbilang bahasa dalam projek Vue

Cara melaksanakan penukaran dan pengantarabangsaan berbilang bahasa dalam projek Vue

Pengenalan:
Dalam konteks globalisasi semasa, banyak laman web dan aplikasi perlu menyediakan sokongan berbilang bahasa untuk memenuhi keperluan kumpulan pengguna yang berbeza. Sebagai rangka kerja bahagian hadapan yang popular, Vue juga menyediakan cara yang mudah untuk mencapai penukaran dan pengantarabangsaan berbilang bahasa. Artikel ini akan memperkenalkan cara melaksanakan penukaran dan pengantarabangsaan berbilang bahasa dalam projek Vue dan memberikan contoh kod khusus.

1. Persediaan

1. Pasang kebergantungan yang diperlukan
   Sebelum bermula, kita perlu memasang pemalam vue-i18n untuk mencapai sokongan berbilang bahasa. Dalam direktori akar projek, buka alat baris arahan dan laksanakan arahan berikut:

npm install vue-i18n --save

2. Buat fail sumber bahasa
   Buat folder tempat dalam direktori src dan buat berbilang fail di dalamnya Fail JSON bahasa, seperti en.json dan zh.json. Fail ini akan menyimpan data terjemahan untuk bahasa yang berbeza.

Mengambil bahasa Inggeris sebagai contoh, tambah kandungan berikut dalam en.json:

{
"header": "Selamat datang ke tapak web saya!",
"kandungan": "Ini ialah projek Vue untuk sokongan berbilang bahasa . ",
"butang": "Tukar Bahasa"
}

Tambahkan kandungan berikut dalam zh.json:

{
"header": "Selamat datang ke tapak web saya!",
"kandungan": "Ini ialah A projek yang menggunakan Vue untuk melaksanakan sokongan berbilang bahasa ",
"butang": "Tukar bahasa"
}

2. Konfigurasi dan penggunaan

1. Import dan konfigurasikan vue-i18n
   Dalam fail utama.js, kita mula-mula perlu Import vue-i18n dan konfigurasikannya. Tambahkan kod berikut pada permulaan fail:

import Vue daripada 'vue'
import VueI18n daripada 'vue-i18n'

Vue.use(VueI18n)

const i18n = local VueI18n(:{
e baru en', // Bahasa lalai ialah bahasa Inggeris
mesej: {

en: require('./locales/en.json'),
zh: require('./locales/zh.json')

}
})

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

2. Menggunakan berbilang bahasa dalam komponen
   Seterusnya, dalam komponen yang memerlukan sokongan berbilang bahasa, kami boleh menggunakan ini.$t untuk mendapatkan teks terjemahan. Sebagai contoh, dalam komponen Header.vue, kita boleh menggunakannya seperti ini:

3. togol Bahasa
   Untuk melaksanakan fungsi penukaran bahasa, kami boleh menambah butang pada komponen dan memanggil kaedah ini.$i18n.locale dalam acara klik untuk menukar bahasa semasa. Sebagai contoh, dalam komponen Header.vue, kita boleh menambah kod berikut:

< ;skrip>
eksport kaedah lalai {
: {

switchLanguage() {
  if (this.$i18n.locale === 'en') {
    this.$i18n.locale = 'zh'
  } else {
    this.$i18n.locale = 'en'
  }
}

}
}

Pada ketika ini, kami telah menyelesaikan konfigurasi dan penggunaan penukaran dan pengantarabangsaan berbilang bahasa dalam projek Vue. Dalam halaman web, selepas pengguna mengklik butang tukar bahasa, bahasa yang dipaparkan pada halaman boleh ditukar dalam masa nyata.

Kesimpulan:
Melaksanakan penukaran dan pengantarabangsaan berbilang bahasa dalam projek Vue adalah proses yang agak mudah. Dengan menggunakan pemalam vue-i18n, kami boleh memperkenalkan fail sumber berbilang bahasa dengan mudah ke dalam projek dan menggunakan teks terjemahan dalam komponen melalui kaedah this.$t. Pada masa yang sama, kami juga boleh menggunakan kaedah ini.$i18n.locale untuk menukar bahasa semasa. Saya harap artikel ini dapat membantu pembaca berjaya melaksanakan fungsi penukaran dan pengantarabangsaan berbilang bahasa dalam projek Vue.

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