Bagaimana untuk melakukan pemprosesan berbilang bahasa dalam Vue?

Dalam pembangunan sebenar, sokongan berbilang bahasa untuk tapak web atau aplikasi telah menjadi ciri yang mesti ada. Sebagai rangka kerja JavaScript yang popular, Vue juga menyokong berbilang bahasa. Artikel ini akan memperkenalkan butiran skema dan pelaksanaan pemprosesan berbilang bahasa dalam Vue.

1. Pemilihan Rancangan
   Terdapat banyak penyelesaian sokongan berbilang bahasa, termasuk tetapi tidak terhad kepada yang berikut:

1.1 Bahagian hadapan bersepadu
Dalam bahagian hadapan Melaksanakan fungsi dan sokongan berbilang bahasa melalui pemalam vue-i18n. Memperkenalkan pek bahasa yang sepadan sebagai komponen bebas boleh memaparkan kandungan yang berbeza dalam persekitaran bahasa yang berbeza. Kelebihan kaedah ini ialah ia tidak memerlukan sokongan pelayan, tetapi ia memerlukan terjemahan dan pengurusan teks berkaitan berbilang bahasa di bahagian hadapan, jadi ia sesuai untuk tapak web atau aplikasi yang tidak mempunyai keperluan berbilang bahasa yang tinggi.

1.2. Sokongan bahagian belakang
Simpan kandungan berbilang bahasa dalam pangkalan data bahagian belakang dan paparkannya di bahagian hadapan dalam bentuk panggilan antara muka. Kaedah ini memerlukan sokongan pelayan, tetapi terjemahan dan pengurusan teks boleh diserahkan kepada profesional bahasa dari pelbagai negara. Kaedah ini sesuai untuk tapak web besar atau sistem pengurusan perusahaan yang memerlukan tahap penyesuaian atau kawalan kebenaran yang tinggi.

Di bawah premis artikel ini, kami akan menggunakan vue-i18n, kaedah bersepadu bahagian hadapan, untuk pemprosesan berbilang bahasa Langkah seterusnya akan memperkenalkan penggunaan Vue-i18n secara terperinci.

2. Cara menggunakan Vue-i18n
   Vue-i18n ialah perpustakaan berbilang bahasa yang dilancarkan secara rasmi oleh Vue, yang menyediakan kaedah penukaran berbilang bahasa, terjemahan responsif, pemprosesan pengantarabangsaan dan fungsi lain. Dengan memperkenalkan pakej vue-i18n, kami boleh melaksanakan fungsi berbilang bahasa dengan mudah dalam Vue.

2.1. Pemasangan dan pengenalan Vue-i18n
Pemasangan Vue-i18n adalah sangat mudah dan boleh dipasang melalui npm atau benang:

npm install vue-i18n

Perkenalkan vue-in komponen Vue i18n:

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

2.2. Konfigurasikan berbilang bahasa
Tentukan kandungan berbilang bahasa dalam komponen Vue:

const messages = {
  en: {
    welcome: 'Welcome to our website'
  },
  zh: {
    welcome: '欢迎访问我们的网站'
  }
}

2.3. Cipta tika VueI18n
Buat contoh daripada VueI18n dan mulakannya:

const i18n = new VueI18n({
  locale: 'en',
  messages
});

Atribut Locale menetapkan bahasa lalai kepada 'en' dan mesej ialah koleksi kandungan berbilang bahasa, termasuk pasangan nilai kunci dalam beberapa bahasa biasa.

2.4. Menggunakan i18n dalam HTML
Dalam HTML, kita boleh memanggil kandungan berbilang bahasa melalui arahan $t atau v-t:

<div>{{ $t("message.welcome") }}</div>

di mana "message.welcome" ditakrifkan dalam For nilai utama dalam atribut mesej, Vue-i18n akan memaparkan teks yang sepadan secara dinamik berdasarkan bahasa semasa.

2.5. Tukar bahasa
Kami boleh menukar bahasa semasa melalui objek i18n:

i18n.locale = ‘zh’;

2.6 Terjemahan responsif
Vue-i18n menyediakan kaedah terjemahan responsif. fungsi i18n.t. Menggunakan kaedah ini, dinamik penukaran bahasa akan dipantau secara automatik dan teks akan diterjemahkan secara automatik berdasarkan bahasa semasa. Seperti yang ditunjukkan di bawah:

export default {
  data() {
    return {
      welcomeText: this.$t('message.welcome'),
    };
  },
};

Dalam coretan kod di atas, apabila bahasa ditukar, teks dalam welcomeText akan dikemas kini secara automatik kepada versi bahasa yang sepadan.

3. Ringkasan
   Vue-i18n menyediakan penyelesaian berbilang bahasa yang ringkas dan mudah digunakan Melalui panggilan antara muka yang mudah dan penyepaduan komponen vue, pembangun boleh menyepadukan dan menggunakan fungsi berbilang bahasa dengan cepat. Dalam projek sebenar, kita boleh menggabungkan ciri-ciri bahasa dan budaya kebangsaan untuk membuat penyelesaian berbilang bahasa yang lebih sesuai dengan keperluan sebenar, menjadikan laman web atau aplikasi lebih mesra dan mesra rakyat.

Atas ialah kandungan terperinci Bagaimana untuk melakukan pemprosesan berbilang bahasa dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!