Pengantarabangsaan dan penyetempatan dalam aplikasi VUE terutamanya dikendalikan menggunakan plugin Vue i18n. 1. Pasang VUE-I18N melalui npm atau benang. 2. Buat fail JSON Locale (misalnya, en.json, es.json) untuk mesej terjemahan. 3. Sediakan contoh i18n dalam main.js dengan konfigurasi locale dan fail mesej. 4. Terjemahan akses dalam templat menggunakan $ t ('kunci'). 5. Menguruskan kekunci terjemahan secara konsisten dan elakkan bersarang yang mendalam untuk berskala. 6. Secara dinamik menukar bahasa dengan mengemas kini harta tanah pada masa runtime. 7. Mengadakan bahasa terpilih dalam penyimpanan tempatan untuk pengekalan keutamaan pengguna. 8. Gunakan nilai dinamik dalam terjemahan dengan suntikan berubah -ubah seperti $ t ('Hellouser', {name: 'Alice'}). 9. Melaksanakan peraturan pluralisasi dalam konfigurasi i18n dan gunakan $ tc () untuk pengendalian jamak yang betul. 10. Untuk keperluan lanjutan seperti sokongan RTL atau pemformatan tarikh, mengintegrasikan perpustakaan seperti INTL atau tarikh-FNS untuk memastikan liputan penyetempatan penuh.

Pengantarabangsaan (I18N) dan Penyetempatan (L10N) dalam aplikasi VUE terutamanya datang kepada dua perkara: menukar kandungan berdasarkan keutamaan bahasa pengguna dan memastikan bahawa teks, tarikh, nombor, dan elemen khusus locale yang dipaparkan dengan betul. Cara yang paling biasa dan berkuasa untuk melakukan ini adalah dengan menggunakan VUE I18N , plugin yang khusus dibina untuk aplikasi VUE.

Menyediakan Vue i18n

Untuk memulakan, pasang vue-i18n melalui NPM atau Benang:

 NPM Pasang VUE-I18N@9

Setelah dipasang, buat fail mesej locale (seperti en.json , es.json , dll) dan sediakan contoh i18n dalam titik entri aplikasi anda ( main.js atau serupa):

 import {createApp} dari 'vue'
import {createi18n} dari 'vue-i18n'
aplikasi import dari './app.vue'
Import en dari './locales/en.json'
Import es dari './locales/es.json'

const i18n = createi18n ({
  Legacy: Palsu,
  Locale: 'en',
  fallbacklocale: 'en',
  Mesej: {
    en,
    es
  }
})

CreateApp (App). Digunakan (i18n) .Mount ('#App')

Sekarang anda boleh mengakses terjemahan di mana -mana dalam templat anda menggunakan $t('key') .

Menguruskan fail terjemahan dengan berkesan

Daripada rentetan hardcoding terus ke dalam komponen, simpannya dalam fail JSON berstruktur seperti:

en.json

 {
  "Selamat Datang": "Selamat Datang!",
  "butang": {
    "Hantar": "Hantar"
  }
}

es.json

 {
  "Selamat Datang": "?Bienvenido!",
  "butang": {
    "Hantar": "Enviar"
  }
}

Ini menjadikannya lebih mudah untuk mengekalkan dan skala apabila aplikasi anda berkembang. Anda juga boleh menggunakan alat seperti PoEditor atau Crowdin untuk membantu menguruskan terjemahan jika bekerja dengan pelbagai bahasa atau pasukan.

Beberapa petua:

• Pastikan kunci konsisten di seluruh kawasan.
• Elakkan struktur yang sangat bersarang kecuali perlu - mereka boleh mendapatkan kemas cepat.
• Gunakan komen dalam fail atau alat berasingan jika pasukan anda termasuk bukan pemaju.

Beralih bahasa secara dinamik

Menukar bahasa aplikasinya semasa runtime adalah mudah. Hanya kemas kini harta locale pada contoh i18n:

 import {usei18n} dari 'vue-i18n'

Eksport Lalai {
  persediaan () {
    const {locale} = usei18n ()

    fungsi changelang (newlang) {
      locale.value = newLang
    }

    kembali {locale, changelang}
  }
}

Dalam templat anda:

 <butang @click = "changelang (&#39;es&#39;)"> Espa?ol </butang>

Ini dengan serta -merta akan menukar semua teks setempat dalam aplikasi anda. Anda juga boleh meneruskan bahasa yang dipilih dalam storan tempatan supaya pengguna tidak perlu beralih setiap kali mereka melawat.

Mengendalikan kandungan dinamik dan pluralized

Kadang -kadang anda perlu menyuntik pembolehubah ke dalam rentetan yang diterjemahkan atau mengendalikan pluralisasi. Vue i18n menyokong kedua -duanya:

Menggunakan nilai dinamik:

Di Json anda:

 "Hellouser": "Hello, {name}!"

Dalam komponen anda:

 <p> {{$ t (&#39;Hellouser&#39;, {name: &#39;Alice&#39;})}} </p>

Pluralisasi:

Sediakan peraturan jamak dalam konfigurasi i18n anda:

 const i18n = createi18n ({
  Legacy: Palsu,
  Locale: 'en',
  fallbacklocale: 'en',
  PluralRules: {
    en: (pilihan, pilihan panjang) => {
      jika (choicesLength === 2) {
        Pilihan kembali> 1? 1: 0
      }
      Pilihan Kembali? 1: 0
    }
  },
  Mesej: {
    en,
    es
  }
})

Kemudian di json anda:

 "Itemselected": "Anda pilih {Count} item | anda memilih {Count} item"

Dan dalam templat anda:

 <p> {{$ tc (&#39;itemSelected&#39;, itemCount, {count: itemcount})}} </p>

Ini membantu menjadikan UI anda berasa semula jadi dalam bahasa yang berbeza di mana peraturan jamak berbeza -beza.

Itulah pada dasarnya bagaimana I18N dan L10N berfungsi di Vue. Ia tidak terlalu rumit apabila anda mempunyai struktur di tempat, tetapi mudah untuk mengabaikan beberapa kes kelebihan seperti bahasa RTL, pemformatan tarikh, atau pengendalian mata wang. Bagi mereka, lihatlah dengan mengintegrasikan dengan perpustakaan seperti date-fns atau Intl . Tetapi untuk kebanyakan keperluan standard, VUE I18N meliputi ia dengan baik.

Atas ialah kandungan terperinci Bagaimanakah pengantarabangsaan (I18N) dan penyetempatan (L10N) dilaksanakan dalam aplikasi VUE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!