چگونه می توان محلی سازی را به برنامه Vue.js با vue-i18n و Localazy اضافه کرد

از

عکس پروفایل نویسنده

@واکلاودکواسلاو هودک

کارآفرین ، ایده پرداز ، توسعه دهنده ، Saas و علاقه مندان به موبایل.

محلی سازی هر نوع برنامه ای ، اعم از وب ، موبایل یا دسک تاپ ، می تواند خسته کننده و تحریک کننده باشد. در این مقاله ، من به شما نشان خواهم داد که چگونه می توانید با Localazy و 

vue-18n

به روشی که وقت خود را به طور موثر سپری کنید و در واقع از روند بومی سازی لذت ببرید.

برجسته ترین ویژگی های Localazy یک فرآیند بررسی فعال ، حافظه ترجمه بسیار دقیق است که توسط ترجمه های به اشتراک گذاشته شده در انجمن پشتیبانی می شود و رابط کاربری غیر مزاحم و کاملاً شفافی است که با گزینه های کم استفاده نفخ نمی کند. و همانطور که به زودی نشان خواهم داد ، یکپارچه با آن کار می کند 

vue-i18n

. با تشکر از آن ، مدیریت رشته های ترجمه ، حتی با پروژه های منبع باز که هر کسی می تواند در آن کمک کند (با کیفیت متفاوت) ، یک تکه کیک است …

tldr

  • برای Localazy ثبت نام کنید ،
  • ایجاد یک برنامه با انگلیسی به عنوان زبان منبع و استفاده از ترجمه های انجمن (ShareTM) گزینه فعال است ،
  • انتخاب کنید Vue.js گزینه ادغام و نصب Localazy CLI ،
  • vue-i18n را نصب و پیکربندی کنید
  • ایجاد کردن 
    localazy.json

    در root ریخته و پیکربندی را تغییر دهید

  • ایجاد کردن 
    locales

    پوشه و در آن ایجاد کنید 

    en.json

    . هر جفت ارز-کلید ترجمه را اضافه کنید ، به عنوان مثال

  • اجرا کن 
    localazy upload

    ،

  • در Localazy ، هر زبانی را اضافه کنید. سپس آن را مرور کرده و عبارات پیشنهادی را بپذیرید ،
  • اجرا کن 
    localazy download

    و بررسی 

    locales

    پوشه برای محل جدید ،

  • برنامه را اجرا کنید 
    npm run serve

ثبت نام و ایجاد برنامه

اول از همه ، بیایید یک حساب جدید در Localazy راه اندازی کنیم و یک برنامه جدید ایجاد کنیم. در این مقاله ، ما از انگلیسی به عنوان زبان مبدا استفاده خواهیم کرد ، اما شما به طور کلی می توانید هر زبان دیگری را انتخاب کنید. مطمئن شوید که استفاده از ترجمه های انجمن (ShareTM) گزینه فعال است. ShareTM حافظه ترجمه بسیار دقیقی است که ذکر کردم. با تشکر از آن ، اکثر برنامه های جدید تا 50٪ رشته های خود را به طور خودکار برای ترجمه به بیش از 80 زبان در دسترس دارند.

برای ایجاد برنامه ادامه دهید. پس از آن ، انتخاب کنید Vue.js در صفحه یکپارچه سازی ما از ابزار قدرتمند CLI برای مدیریت بارگذاری و بارگیری عبارات استفاده خواهیم کرد. نصب برای لینوکس ، MacOS و ویندوز در دسترس است. به کلیدهای خواندن و نوشتن در مرحله 2 توجه کنید. به زودی به آن نیاز خواهیم داشت.

پروژه Vue را تنظیم کنید

اگر نمی خواهید راهنمای گام به گام را در اینجا دنبال کنید ، می توانید نگاهی به repo تمام شده بیندازید. در غیر این صورت ، مدتی بمانید و گوش دهید.

یک پروژه Vue جدید با ایجاد کنید 

vue create vue-i18n-example

(اگر Vue CLI را نصب نکرده اید ، اجرا کنید 

npm install -g @vue/cli

) و استفاده کنید Vue 2 از پیش تعیین شده پس از نصب همه چیز ، اضافه کنید 

vue-i18n

.

اکنون وقت آن است که ادغام با Localazy را اضافه کنید. ایجاد کردن 

localazy.json

در پوشه ریشه تنظیمات زیر را وارد کنید. از کلیدهای نوشتن و خواندن از مرحله 2 صفحه راهنمای ادغام استفاده کنید.

{
    "writeKey": "your-write-key",
    "readKey": "your-read-key",

    "upload": {  
      "type": "json",
      "files": "src/assets/locales/en.json"         
    },
    
    "download": {
      "files": "src/assets/locales/${lang}.json"
    }
}

علاوه بر این ، ایجاد کنید 

src/assets/locales

پوشه و 

en.json

پرونده داخل. از آنجا که ما انگلیسی را به عنوان زبان مبدا تنظیم کرده ایم ، این فایل شامل عبارات منبع برای برنامه ما خواهد بود. می توانید هر جفت ارزش کلیدی را که دوست دارید پر کنید. من این را اضافه می کنم

{
  "hello": "Hello, my friend",
  "stay_awhile_and_listen": "Stay awhile and listen"
}

در این مرحله ، برنامه آماده مدیریت محلی سازی توسط Localazy است. قبل از اینکه دسته اول رشته ها را بارگذاری کنیم ، بیایید یک سناریو تست را با آن آماده کنیم 

vue-i18n

تا آن را از بشقاب های خود خارج کنیم.

ابتدا اصلاح کنید 

main.js

.

import Vue from 'vue'
import App from './App.vue'
import VueI18n from "vue-i18n";
import en from "../src/assets/locales/en.json";

const messages = {
    en,
}

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'en',
    messages
})


Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

و بعد 

App.vue
<template>
  <div id="app">
    <h1>{{$t('hello')}}h1>
    <h2>{{$t('stay_awhile_and_listen')}}h2>
  div>
template>

<script>

export default {
  name: 'App',
}
script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
style>

وقتی می دوی 

npm run serve

، شما باید دو عبارت انگلیسی را ببینید. هیچ چیز فانتزی تا کنون

بارگیری و بارگیری عبارات

بیایید پرونده انگلیسی را در Localazy بارگذاری کنیم. از پوشه root ، دستور زیر را اجرا کنید

-s

argument مخفف شبیه سازی است. این آزمایش خوبی است که پیکربندی را بدون بارگذاری چیزی امتحان کنید تا اطمینان حاصل کنید که اتفاقی غیر منتظره رخ نمی دهد (مانند برخی از جفت های مقدار کلید به اشتباه مطابقت ندارند و یکدیگر را لغو می کنند). بسته به نسخه CLI ، خروجی باید چیزی در این راستا باشد

Localazy CLI, v1.1.9
Advanced file uploader/downloader for the Localazy translation platform.

Read more information at https://localazy.com/docs/cli

Uploading...
  - deprecate missing: false
  - import as new: false
  - app version: 0
  - groups: (default only)
  - folder: .

Processing files...

./src/assets/locales/en.json
  (file=file.json, lang=inherited, type=json)

Verifying...

Validating...

Done.

همه چیز خوب کار کرد و پرونده انگلیسی ما مطابقت داشت. این بار اجازه دهید آن را بارگذاری کنیم.

صفحه برنامه خود را تازه کنید و باید زبان انگلیسی را در لیست ببینید. باز کن زبانها را اضافه کنید برگه و در آنجا چند زبان با اطلاعات مربوط به درصد ترجمه های خودکار پیدا می کنید. این احتمال وجود دارد که 50٪ یا 100٪ را ببینید. مطابقت خودکار با ShareTM همیشه بهبود می یابد و به احتمال زیاد به لطف این مقاله تمام عبارات به صورت خودکار ترجمه می شوند. چقدر باحاله؟ ?

به یک روش یا دیگری ، آلمانی را جستجو کنید و آن را به برنامه خود اضافه کنید. خواهید دید که یک دکمه بررسی وجود دارد. هر بار که ShareTM پیشنهادی برای ترجمه ارائه می دهد ، دارای وضعیت نامزدی خواهد بود. این به این معنی است که برای بررسی آماده خواهد بود و هر بازبینی می تواند آن را تأیید کند یا رد کند. پیش بروید و عبارت (های) پیشنهادی را تأیید کنید.

در صورتی که ShareTM 100٪ عبارات را ترجمه نکرده است ، به لیست زبان ها برگردید و متوجه شوید که اکنون دکمه بررسی ترجمه را می خواند. Localazy تشخیص می دهد که هیچ چیز برای بررسی وجود ندارد اما هنوز چیزی برای ترجمه وجود دارد ، بنابراین اقدام بعدی را با یک کلیک به شما پیشنهاد می دهد. عبارت دیگر را ترجمه کنید (ممکن است از یک عبارت پیشنهادی در صفحه ترجمه استفاده کنید). این بار دیگر نیازی به انجام مراحل بررسی ندارید زیرا به طور پیش فرض مترجم معتبری به عنوان مالک هستید ، بنابراین ترجمه بلافاصله تأیید می شود.

وقت آن است که به پروژه Vue برگردیم.

با استفاده از این دستور ، تمام عبارات پذیرفته شده جدید و زبانهای اضافه شده را بارگیری خواهید کرد. در 

locales

پوشه ، ما می توانیم ببینید که به تازگی وجود دارد 

de.json

.

آخرین کاری که باید انجام شود به روزرسانی است 

main.js

و فایل منبع locale آلمان را اضافه کنید.

import Vue from 'vue'
import App from './App.vue'
import VueI18n from "vue-i18n";
import en from "../src/assets/locales/en.json";
import de from "../src/assets/locales/de.json";


const messages = {
    en,
    de
}

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'de',
    messages
})


Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

اکنون وقتی دوباره برنامه را اجرا می کنید ، می بینید که عبارات به درستی به آلمانی ترجمه شده اند.

کلمات پایانی

امیدوارم با این مقدمه کوتاه در Localazy لذت برده باشید 

vue-i18n

. اگر می خواهید به ما نزدیکتر شوید ، در Discord با ما همراه باشید.

قبلاً در https://localazy.com/blog/ چگونه-با-vue-i18i- و-localazy- قرار-بگیرد-منتشر شد

مربوط

برچسب ها

با هکر نون همراه باشید

حساب رایگان خود را ایجاد کنید تا قفل تجربه خواندن سفارشی خود را باز کنید.

سئو PBN | خبر های جدید سئو و هک و سرور