Menyiapkan vue-i18n dan File Pesan
createI18n(), file JSON locale, sintaks pesan {name}, key bertingkat, serta locale fallback.
Menyiapkan vue-i18n dan File Pesan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Apa Itu i18n?
Internasionalisasi (i18n) adalah proses membangun app agar dapat menampilkan teks dalam berbagai bahasa. Vue I18n adalah pustaka bergaya resmi untuk menerjemahkan app Vue.
Alih-alih menulis string bahasa Inggris secara langsung, Anda mencari kunci yang menghasilkan bahasa aktif.
Memasang Vue I18n
Tambahkan paketnya. Untuk Vue 3, gunakan versi 9 atau yang lebih baru, yang dibangun berdasarkan API Composition.
// terminal
// npm install vue-i18nBerkas Pesan
Terjemahan disimpan dalam objek pesan, satu untuk setiap lokal. Kunci dipetakan ke string terjemahan. Mulailah dengan bahasa Inggris.
const en = {
greeting: "Hello",
nav: {
home: "Home",
about: "About",
},
}Menambahkan Lokal Turki
Setiap lokal menggunakan struktur kunci yang sama agar setiap kunci tersedia dalam setiap bahasa.
const tr = {
greeting: "Merhaba",
nav: {
home: "Ana Sayfa",
about: "Hakkinda",
},
}Membuat Instans i18n
createI18n membuat instans tersebut. Tetapkan locale (bahasa aktif), fallbackLocale (digunakan saat kunci tidak ditemukan), dan peta messages.
import { createI18n } from "vue-i18n"
const i18n = createI18n({
legacy: false,
locale: "en",
fallbackLocale: "en",
messages: { en, tr },
})Mengapa legacy: false
Menetapkan legacy: false mengaktifkan mode API Composition, yang digunakan oleh app Vue 3 modern. Pengaturan ini membuka komposabel useI18n yang akan Anda temui pada pelajaran berikutnya.
const i18n = createI18n({
legacy: false, // Composition API mode
locale: "en",
messages: { en, tr },
})Mendaftarkan ke app
Pasang instans tersebut sebagai plugin dengan app.use(i18n). Dengan begitu, helper terjemahan tersedia di seluruh pohon komponen.
import { createApp } from "vue"
import App from "./App.vue"
const app = createApp(App)
app.use(i18n)
app.mount("#app")Menggunakan $t dalam Templat
Setelah terpasang, setiap templat dapat memanggil $t(key) untuk mencari terjemahan dalam lokal aktif.
<template>
<h1>{{ $t("greeting") }}</h1>
<a>{{ $t("nav.home") }}</a>
</template>Cara Kerja fallbackLocale
Jika kunci tidak ditemukan dalam lokal aktif, Vue I18n menggunakan fallbackLocale sebagai cadangan alih-alih menampilkan kunci mentah. Hal ini menjaga antarmuka tetap masuk akal selama terjemahan masih dikerjakan.
// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English textInterpolasi dengan Penanda Tempat
Pesan dapat berisi penanda tempat bernama di dalam kurung kurawal. Teruskan nilai sebagai argumen kedua untuk mengisinya.
const en = {
welcome: "Welcome, {name}!",
}
// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"Menata Berkas Pesan
Untuk app nyata, letakkan setiap lokal dalam berkasnya sendiri (en.json, tr.json) dan impor berkas tersebut. Dengan begitu, terjemahan lebih mudah dikelola dan penerjemah dapat bekerja secara mandiri.
// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"
createI18n({ locale: "en", messages: { en, tr } })Pemeriksaan Singkat
Periksa pemahaman Anda tentang penyiapan Vue I18n.
Rangkuman
Anda telah menyiapkan Vue I18n:
- i18n berarti menampilkan teks dalam berbagai bahasa dengan mencari kunci.
- Tentukan satu objek pesan untuk setiap lokal dengan struktur kunci yang sama.
createI18nmenerimalocale,fallbackLocale, danmessages; gunakanlegacy: falseuntuk mode Composition.- Pasang dengan
app.use(i18n)dan terjemahkan dalam templat dengan$t(key). - Penanda tempat seperti
{name}diisi melalui argumen kedua.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menyiapkan vue-i18n dan File Pesan” gratis?
Ya — teks lengkap “Menyiapkan vue-i18n dan File Pesan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menyiapkan vue-i18n dan File Pesan”?
createI18n(), file JSON locale, sintaks pesan {name}, key bertingkat, serta locale fallback. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Menyiapkan vue-i18n dan File Pesan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menyiapkan vue-i18n dan File Pesan
- Composable useI18n dan Fungsi t()
- Pluralisasi dan Pesan Tertaut
- Pemformatan Angka, Tanggal, dan Mata Uang