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

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

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

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

قم بإنشاء ملف تكوين i18n.json في جذر مشروعك:

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

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

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

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

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

ترجمة كل شيء

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

npx lingo.dev@latest i18n

تقوم واجهة سطر الأوامر بفحص مكوناتك بحثًا عن كتل <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/**/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

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

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

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

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

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

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

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