Lingo.dev + مكونات Vue.js أحادية الملف

يدعم Lingo.dev CLI مكونات Vue I18n أحادية الملف، مما يتيح لك الاحتفاظ بالترجمات داخل ملفات .vue الخاصة بك.

ملاحظة: إذا كان تطبيق Vue.js الخاص بك يستخدم ملفات JSON للغات، استخدم تنسيق .json للواجهة الأمامية.

الإعداد السريع

أنشئ ملف تكوين i18n.json في جذر مشروعك:

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/components/*.vue", "src/views/*.vue"]
    }
  }
}

يحدد هذا التكوين اللغة الإنجليزية كلغة مصدر، ويستهدف الإسبانية والفرنسية والألمانية، ويعالج ملفات .vue في الدليلين src/components و src/views.

البحث عن اللغات المدعومة

اعرض قائمة باللغات المصدر والهدف المتاحة:

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

ترجمة كل شيء

قم بتشغيل الأمر التالي لترجمة جميع مكونات Vue:

npx lingo.dev@latest run

يفحص CLI مكوناتك بحثًا عن كتل <i18n>، ويترجم المحتوى الجديد أو المعدل، ويحدث الترجمات في مكانها.

كيف يعمل مع مكونات Vue

يعمل Lingo.dev مباشرة مع بنية i18n القياسية في Vue:

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

بعد الترجمة، سيحتوي مكونك على جميع اللغات المستهدفة:

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

التكوين المتقدم

استبعاد الملفات

استبعد مكونات معينة من الترجمة:

"vue-json": {
  "include": ["src/components/*.vue", "src/views/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

الترجمة الهجينة

ادمج الترجمات القائمة على المكونات والترجمات القائمة على الملفات:

"buckets": {
  "vue-json": {
    "include": ["src/components/*.vue", "src/views/*.vue"]
  },
  "json": {
    "include": ["src/locales/[locale].json"]
  }
}

يحافظ هذا الإعداد على الترجمات الخاصة بالمكونات داخل المكونات نفسها ويخزن الترجمات العامة في ملفات JSON منفصلة.

لماذا استخدام هذا النهج

• يحافظ على الترجمات مع المكونات التي تستخدمها
• لا حاجة لاستخراج النصوص إلى ملفات منفصلة
• يفهم الذكاء الاصطناعي سياق المكون للحصول على ترجمات أفضل
• يترجم فقط ما تم تغييره
• يعمل مع الأنماط الموصى بها من Vue I18n

يوفر Lingo.dev ترجمات مدعومة بالذكاء الاصطناعي مع الحفاظ على البنية المعمارية القائمة على المكونات في Vue.