Cara menggunakan Vue untuk pengantarabangsaan dan sokongan berbilang bahasa

Cara menggunakan Vue untuk pengantarabangsaan dan sokongan berbilang bahasa

Dengan perkembangan globalisasi, semakin banyak laman web dan aplikasi perlu menyokong berbilang bahasa untuk memenuhi keperluan pengguna di rantau yang berbeza. Sebagai rangka kerja hadapan yang popular, Vue menyediakan cara yang mudah dan fleksibel untuk mencapai pengantarabangsaan dan sokongan berbilang bahasa. Artikel ini akan memperkenalkan cara menggunakan pengantarabangsaan dalam Vue dan memberikan contoh kod.

1. Pasang vue-i18n
   Mula-mula, kita perlu memasang pemalam vue-i18n. Jalankan arahan berikut dalam baris arahan untuk memasang vue-i18n:

npm install vue-i18n --save

2. Buat fail bahasa
   Buat direktori lang di bawah direktori src dan cipta fail languages.js di dalamnya. Fail languages.js digunakan untuk menyimpan teks terjemahan dalam bahasa yang berbeza. Sebagai contoh, kita boleh mencipta fail bahasa Cina dan Inggeris:

// src/lang/languages.js

const languages = {
  en: {
    welcome: 'Welcome to my website!',
    about: 'About',
    contact: 'Contact',
  },
  zh: {
    welcome: '欢迎来到我的网站！',
    about: '关于',
    contact: '联系',
  },
}

export default languages;

3. Buat contoh i18n
   Dalam fail main.js, kita perlu mencipta contoh i18n dan memperkenalkan fail languages.js:

// main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import languages from './lang/languages';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages: languages,
});

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

dalam di atas Dalam kod, kami mula-mula memperkenalkan pemalam VueI18n dan mendaftarkannya dalam Vue. Kemudian, kami mencipta contoh VueI18n dan menentukan bahasa lalai sebagai bahasa Inggeris. Akhirnya, kami menyerahkan contoh i18n kepada contoh Vue dan memulakan aplikasi.

4. Menggunakan teks terjemahan dalam komponen
   Kini, kami boleh menggunakan teks terjemahan dalam komponen. Kita boleh mengakses teks terjemahan melalui kaedah $t. Contohnya, dalam komponen, kita boleh menggunakan teks terjemahan seperti ini:

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <ul>
      <li>{{ $t('about') }}</li>
      <li>{{ $t('contact') }}</li>
    </ul>
  </div>
</template>

Dalam kod di atas, kami menggunakan kaedah $t untuk mendapatkan teks terjemahan. Parameter kaedah $t ialah kunci teks terjemahan. Dalam contoh kami, 'selamat datang', 'tentang' dan 'kenalan' adalah semua kunci untuk menterjemah teks.

5. Tukar bahasa
   Vue-i18n juga menyediakan cara untuk menukar bahasa. Kita boleh menukar bahasa dengan memanggil kaedah $locale. Sebagai contoh, kita boleh menambah butang untuk menukar bahasa dalam komponen:

<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
  
    <h1>{{ $t('welcome') }}</h1>
    <ul>
      <li>{{ $t('about') }}</li>
      <li>{{ $t('contact') }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(lang) {
      this.$i18n.locale = lang;
    },
  },
}
</script>

Dalam kod di atas, kami mengikat acara klik pada dua butang Apabila butang diklik, kaedah suisBahasa akan dipanggil untuk bertukar bahasa.

Pada ketika ini, kami telah melengkapkan pengantarabangsaan dan sokongan berbilang bahasa dalam Vue. Melalui langkah di atas, kami boleh menterjemah aplikasi Vue dengan mudah ke dalam bahasa yang berbeza dan menyediakan fungsi penukaran bahasa. Saya harap artikel ini dapat membantu anda melaksanakan pengantarabangsaan dan sokongan berbilang bahasa dalam projek Vue anda.

Contoh kod ada dalam pautan dokumen rasmi: https://kazupon.github.io/vue-i18n/

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