Vue Academy · درس

إعداد vue-i18n وملفات الرسائل

‏createI18n()، وملفات JSON للغات، وبنية الرسائل {name}، والمفاتيح المتداخلة، واللغة البديلة

إعداد vue-i18n وملفات الرسائل درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما هو i18n؟

يشير التدويل (i18n) إلى بناء تطبيقكم بحيث يتمكن من عرض النصوص بلغات متعددة. تُعد Vue I18n المكتبة الرسمية الطابع لترجمة تطبيقات Vue.

بدلًا من تضمين النصوص الإنجليزية مباشرةً، تبحثون عن مفاتيح تُحيل إلى اللغة النشطة.

تثبيت Vue I18n

أضيفوا الحزمة. في Vue 3، استخدموا الإصدار 9 أو إصدارًا أحدث، فهو مبني على Composition API.

// terminal
// npm install vue-i18n

ملفات الرسائل

توجد الترجمات في كائنات الرسائل، كائن واحد لكل لغة محلية. تربط المفاتيح بين النصوص المترجمة. ابدؤوا باللغة الإنجليزية.

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

إضافة لغة محلية تركية

تحاكي كل لغة محلية بنية المفاتيح نفسها، بحيث يوجد كل مفتاح في كل لغة.

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

إنشاء مثيل i18n

تنشئ createI18n المثيل. عيّنوا locale (اللغة النشطة)، وfallbackLocale (المستخدمة عند فقدان مفتاح)، وخريطة messages.

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

لماذا legacy: false؟

يؤدي تعيين legacy: false إلى تفعيل وضع Composition API، وهو الوضع الذي تستخدمه تطبيقات Vue 3 الحديثة. كما يتيح لكم composable useI18n الذي ستتعرفون إليه في الدرس التالي.

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

تسجيل المثيل في التطبيق

ثبّتوا المثيل كإضافة باستخدام app.use(i18n). يتيح ذلك أدوات الترجمة في شجرة المكوّنات بأكملها.

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

استخدام $t في القوالب

بعد التثبيت، يمكن لكل قالب استدعاء $t(key) للبحث عن ترجمة في اللغة المحلية النشطة.

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

كيفية عمل fallbackLocale

إذا كان مفتاح ما مفقودًا في اللغة المحلية النشطة، تنتقل Vue I18n إلى fallbackLocale بدلًا من عرض المفتاح الخام. ويحافظ ذلك على منطقية واجهة المستخدم أثناء إنجاز الترجمات.

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

الاستيفاء باستخدام العناصر النائبة

يمكن أن تحتوي الرسائل على عناصر نائبة مسمّاة بين أقواس معقوفة. مرّروا القيم باعتبارها الوسيط الثاني لملء هذه العناصر.

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

تنظيم ملفات الرسائل

في التطبيقات الفعلية، ضعوا كل لغة محلية في ملف خاص بها (en.json، tr.json) واستوردوا هذه الملفات. يحافظ ذلك على سهولة إدارة الترجمات، ويتيح للمترجمين العمل باستقلالية.

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

تحقق سريع

تحققوا من فهمكم لإعداد Vue I18n.

مراجعة

أعددتم Vue I18n:

يعني i18n عرض النصوص بلغات متعددة من خلال البحث عن المفاتيح.
عرّفوا كائن رسائل لكل لغة محلية مع بنية المفاتيح نفسها.
تتلقى createI18n كلًا من locale وfallbackLocale وmessages؛ استخدموا legacy: false لوضع Composition.
ثبّتوا المكتبة باستخدام app.use(i18n)، وترجموا النصوص في القوالب باستخدام $t(key).
تُملأ العناصر النائبة مثل {name} عبر وسيط ثانٍ.

الأسئلة الشائعة

هل درس «إعداد vue-i18n وملفات الرسائل» مجاني؟

نعم — نص درس «إعداد vue-i18n وملفات الرسائل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعداد vue-i18n وملفات الرسائل»؟

‏createI18n()، وملفات JSON للغات، وبنية الرسائل {name}، والمفاتيح المتداخلة، واللغة البديلة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إعداد vue-i18n وملفات الرسائل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy