Bagaimana untuk mencapai pelbagai bahasa dan pengantarabangsaan dalam Vue

Cara mencapai pelbagai bahasa dan pengantarabangsaan dalam Vue

Pengenalan:
Dengan pecutan globalisasi dan pembangunan Internet, semakin banyak aplikasi web perlu menyokong persekitaran berbilang bahasa untuk memberikan pengalaman pengguna yang lebih baik. Sebagai rangka kerja JavaScript moden, Vue juga menyediakan beberapa kaedah mudah untuk pelaksanaan berbilang bahasa dan pengantarabangsaan. Artikel ini akan memperkenalkan cara melaksanakan berbilang bahasa dan pengantarabangsaan dalam Vue dan memberikan contoh kod khusus.

1. Pemilihan perpustakaan pengantarabangsaan
Tugas pertama untuk mencapai pelbagai bahasa dan pengantarabangsaan dalam Vue ialah memilih perpustakaan pengantarabangsaan yang sesuai. Pada masa ini, perpustakaan pengantarabangsaan yang lebih biasa digunakan termasuk vue-i18n dan vue-intl.

1. vue-i18n:
   vue-i18n ialah pemalam pengantarabangsaan untuk Vue.js Ia menyediakan satu siri API dan arahan untuk memudahkan kami mencapai pelbagai bahasa dan pengantarabangsaan dalam aplikasi Vue. Mempunyai sokongan komuniti yang baik dan penyelenggaraan kemas kini yang stabil.
2. vue-intl:
   vue-intl ialah pemalam pengantarabangsaan untuk Vue.js berdasarkan Format.js, yang menyediakan fungsi yang lebih kaya dan pilihan konfigurasi yang lebih fleksibel. Jika projek memerlukan pemprosesan pengantarabangsaan yang lebih kompleks, vue-intl ialah pilihan yang baik.

2. Konfigurasi dan penggunaan asas
Mengambil vue-i18n sebagai contoh, berikut akan memperkenalkan cara mengkonfigurasi dan menggunakan berbilang bahasa dan pengantarabangsaan dalam Vue.

1. Pemasangan dan konfigurasi:
   Mula-mula, kita perlu memasang vue-i18n menggunakan npm atau benang. Dalam direktori akar projek, laksanakan arahan berikut:

   npm install vue-i18n

   Kemudian, perkenalkan vue-i18n dalam fail main.js projek dan konfigurasikannya:

   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   
   Vue.use(VueI18n);
   
   const i18n = new VueI18n({
     locale: 'zh-CN',
     messages: {
    'zh-CN': require('./locales/zh-CN.json'),
    'en-US': require('./locales/en-US.json'),
     },
   });
   
   new Vue({
     i18n,
   }).$mount('#app');

Dalam kod di atas, kami menggunakan Vue.use () Kaedah mendaftarkan vue-i18n sebagai pemalam Vue. Kemudian, buat contoh VueI18n dan buat beberapa konfigurasi. Antaranya, tempattempat mewakili tempattempat lalai, dan mesej mewakili pek bahasa kami.

2. Penciptaan dan penggunaan pakej bahasa:
   Dalam kod di atas, kami melihat objek mesej yang dihantar semasa membuat contoh VueI18n, iaitu jadual pemetaan yang mengandungi pakej bahasa kami. Kami boleh menyimpan objek mesej dalam fail berasingan, seperti zh-CN.json dan en-US.json, dan memperkenalkannya melalui kaedah require(). Kandungan pakej bahasa tertentu boleh ditakrifkan dalam format berikut:

   // zh-CN.json
   {
     "hello": "你好",
     "world": "世界"
   }
   
   // en-US.json
   {
     "hello": "Hello",
     "world": "World"
   }

   Menggunakan berbilang bahasa dan pengantarabangsaan dalam komponen Vue, kami boleh memaparkan kandungan teks dalam pakej bahasa dengan cara berikut:

   <template>
     <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('world') }}</p>
     </div>
   </template>

   Dalam kod di atas, $ t() ialah kaedah yang disediakan oleh vue-i18n untuk menterjemah teks. Dalam penggunaan sebenar, kami boleh menukar persekitaran bahasa secara dinamik mengikut tetapan keutamaan bahasa pengguna dan pemilihan pengguna.

3 Tukar tempat secara dinamik
Dalam sesetengah kes, kita mungkin perlu menukar tempattempat secara dinamik semasa masa jalan. vue-i18n menyediakan beberapa kaedah untuk mencapai fungsi ini. . kandungan.

1. Gunakan nilai persekitaran bahasa setempat:

   Kita boleh gunakan ini.$i18n.locale dalam komponen Vue untuk mendapatkan nilai tempat tempatan semasa.
   

   4 Penggunaan lanjutan pengantarabangsaan

   Selain terjemahan teks asas, kami juga mungkin memerlukan pemprosesan pengantarabangsaan yang lebih kompleks, seperti pemformatan tarikh, pemformatan nombor, simbol mata wang, dsb.
2. 
   
Pengantarabangsaan tarikh dan masa:

vue-i18n menyediakan fungsi pemformatan tarikh dan masa. Kami boleh mentakrifkan format tarikh dan masa dalam pakej bahasa dan menggunakannya dengan cara berikut:

this.$i18n.locale = 'en-US';

Dalam kod di atas, $d() ialah kaedah yang disediakan oleh vue-i18n untuk memformat tarikh dan masa. Antaranya, 'pendek' dan 'panjang' ialah pilihan pemformatan untuk tarikh dan masa.

1. Pengantarabangsaan nombor dan mata wang:
   Begitu juga, kita boleh menggunakan vue-i18n untuk memformat nombor dan mata wang. Tentukan format nombor dan mata wang dalam pakej bahasa dan gunakannya dengan cara berikut:

   <template>
     <div>
    <p>{{ $d(new Date(), 'short') }}</p>
    <p>{{ $d(new Date(), 'long') }}</p>
     </div>
   </template>

   Dalam kod di atas, $n() ialah kaedah yang disediakan oleh vue-i18n untuk memformat nombor dan mata wang. Antaranya, 'mata wang' ialah pilihan pemformatan mata wang, dan 'perpuluhan' ialah pilihan pemformatan perpuluhan.

2. Ringkasan:
   Berbilang bahasa dan pengantarabangsaan adalah salah satu ciri yang amat diperlukan dalam aplikasi web moden Vue menyediakan alatan dan perpustakaan yang mudah untuk mencapai pelbagai bahasa dan pengantarabangsaan. Dalam artikel ini, kami terutamanya memperkenalkan cara menggunakan vue-i18n untuk mencapai pelbagai bahasa dan pengantarabangsaan, dan memberikan beberapa contoh kod khusus. Saya harap artikel ini dapat membantu anda melaksanakan fungsi berbilang bahasa dan pengantarabangsaan dalam projek Vue anda.

Atas ialah kandungan terperinci Bagaimana untuk mencapai pelbagai bahasa dan pengantarabangsaan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!