Cara melaksanakan pengantarabangsaan halaman dan penukaran berbilang bahasa dalam pembangunan teknologi Vue

Cara melaksanakan pengantarabangsaan halaman dan penukaran berbilang bahasa dalam pembangunan teknologi Vue

Pengenalan:
Dengan perkembangan globalisasi, semakin banyak aplikasi perlu menyediakan sokongan berbilang bahasa. Dalam pembangunan teknologi Vue, cara melaksanakan pengantarabangsaan halaman dan penukaran berbilang bahasa telah menjadi sangat penting. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue-i18n untuk melaksanakan pengantarabangsaan halaman dan penukaran berbilang bahasa serta menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik.

1. Pengenalan kepada Vue-i18n
Vue-i18n ialah pemalam pengantarabangsaan untuk Vue.js, yang membolehkan kami melaksanakan penukaran berbilang bahasa dan pengantarabangsaan halaman dengan mudah. Ia menyediakan fungsi terjemahan dan arahan terjemahan yang membolehkan kami menggunakan bahasa yang berbeza dalam templat dan skrip. . direktori src Cipta direktori locales dan cipta fail json di dalamnya untuk menyimpan teks terjemahan dalam setiap bahasa. Contohnya, cipta fail zh.json untuk menyimpan teks terjemahan bahasa Cina:

npm install vue-i18n

Konfigurasikan Vue-i18n
1. Konfigurasikan Vue-i18n dalam fail main.js, import fail pek bahasa dan konfigurasikan contoh Vue-i18n:

   // zh.json
   {
     "hello": "你好",
     "welcome": "欢迎来到我的网站"
   }

   Salin selepas log masuk
   
   

Gunakan fungsi terjemahan dalam templat
2. Dalam templat komponen Vue, anda boleh menggunakan fungsi terjemahan $t yang disediakan oleh Vue-i18n untuk terjemahan. Contohnya, dalam komponen HelloWorld:

   // main.js
   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   import zh from './locales/zh.json';
   
   Vue.use(VueI18n);
   
   const i18n = new VueI18n({
     locale: 'zh',
     messages: {
    zh
     }
   });
   
   new Vue({
     i18n,
     render: h => h(App)
   }).$mount('#app');

   Salin selepas log masuk
   
   

Tukar bahasa
3. Vue-i18n juga menyediakan kaedah untuk menukar bahasa $locale, yang boleh mencapai penukaran berbilang bahasa halaman dengan menukar tempat yang berbeza. Contohnya, sediakan menu lungsur turun dalam komponen untuk menukar bahasa:

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

   Salin selepas log masuk
   
   3. Ringkasan
4. Artikel ini memperkenalkan cara menggunakan Vue-i18n untuk melaksanakan pengantarabangsaan halaman dan penukaran berbilang bahasa. Dengan memasang pemalam Vue-i18n, mencipta fail pek bahasa, mengkonfigurasi tika Vue-i18n, dan kemudian menggunakan fungsi terjemahan $t dalam templat untuk mencapai pengantarabangsaan dan penukaran berbilang bahasa. Dalam komponen, anda boleh menukar bahasa dengan menukar tempat. Saya harap artikel ini dapat membantu pembaca lebih memahami cara melaksanakan pengantarabangsaan halaman dan penukaran berbilang bahasa dalam pembangunan teknologi Vue.

   
   (Jumlah bilangan perkataan: 560 patah perkataan)

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