Vue를 로컬화하는 방법vue-i18n과 Localazy가 있는 js 응용 프로그램

웹, 이동, 데스크톱 등 모든 종류의 응용 프로그램의 로컬화는 지루하고 짜증날 수도 있다.본고에서 Localazy와 vue-18n을 사용하여 이 문제들을 쉽게 처리하는 방법을 보여 드리겠습니다. 그러면 당신은 시간을 효과적으로 활용하고 현지화 과정을 진정으로 누릴 수 있습니다.
Localazy는 CLI를 통해 다양한 프레임워크와 광범위한 형식을 지원하는 유니버설 로컬화 관리 플랫폼입니다.Localazy의 가장 두드러진 특징은 적극적이고 주동적인 심사 과정이다. 지역 사회가 번역과 비간섭 지원을 공유하는 고도의 정확한 번역 메모리와 수정처럼 뚜렷한 사용자 인터페이스로 매우 적은 선택으로 인해 팽창하지 않는다.내가 잠시 후에 보여줄 것처럼, 그것은 vue-i18n과 틈이 없다.덕분에 번역 문자열을 관리하면 누구나 공헌할 수 있는 개원 프로젝트도 식은 죽 먹기다🍰.

너무 길어서 읽을 수가 없어요.

등록Localazy,

create an app, 영어를 원본 언어로 하고 "커뮤니티 번역 사용(ShareTM)"옵션을 사용합니다.

Vue를 선택합니다.js 통합 옵션 및 Localazy 설치CLI,

설치 및 구성vue-i18n

루트에서 생성localazy.json, 붙여넣기 및 수정configuration

폴더를 만들고 locales 폴더를 만듭니다.임의의 번역 키 값 쌍 추가

운영 en.json,

Localazy에서 언어를 추가합니다.그리고 건의를 복습하고 받아들인다

실행localazy upload 및 새 로케일 폴더 확인

애플리케이션 실행localazy download

등록 및 애플리케이션 생성

우선, Localazy에서 하나를 만듭시다set up a new account.본고에서, 우리는 영어를 원어로 사용할 것이지만, 당신은 통상적으로 어떤 다른 언어를 선택할 수 있습니다.커뮤니티 번역(ShareTM) 옵션이 활성화되어 있는지 확인합니다.new application는 내가 언급한 고도의 정확한 번역 기억이다.덕분에 대부분의 새로운 응용 프로그램은 80여 개의 언어로 자동 번역할 수 있는 50% 의 문자열을 가지고 있다.
응용 프로그램을 계속 만듭니다.그런 다음 Vue를 선택합니다.통합 화면의 js.강력한 CLI 도구를 사용하여 구문 업로드 및 다운로드를 관리합니다.ShareTM Linux, MacOS 및 Windows에서 사용할 수 있습니다.2단계의 읽기와 쓰기 키를 주의하십시오.우리는 곧 그것을 필요로 할 것이다.

설치 Vue 항목 설정

이 단계별 지침을 따르지 않으려면 을 참조하십시오.그렇지 않으면, 잠시만 기다려 주십시오.npm run serve를 사용하여 새 Vue 프로젝트를 만듭니다. (Vue CLI가 설치되어 있지 않으면 vue create vue-i18n-example 를 실행하고 Vue 2 사전 설정을 사용합니다.모든 내용을 설치한 후 vue-i18n을 추가합니다.

npm install vue-i18n

이제 Localazy와의 통합을 추가할 때가 되었습니다.루트 폴더에 npm install -g @vue/cli 를 만들고 다음 설정을 붙여넣습니다.통합 가이드 페이지 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"
    }
}

또한 localazy.json 폴더 및 src/assets/locales 파일을 생성합니다.우리는 이미 영어를 원본 언어로 설정했기 때문에, 이 파일에는 응용 프로그램의 원본 단어가 포함될 것이다.너는 네가 좋아하는 키 값을 모두 기입할 수 있다.이거 넣을게요.

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

이 때 응용 프로그램은 Localazy에서 로컬라이제이션을 관리할 준비가 되어 있습니다.첫 번째 문자열을 업로드하기 전에 vue-i18n을 사용하는 테스트 장면을 준비하여 플랫폼에서 삭제합니다.
1차 수정en.json.

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')

그리고 main.js

<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>

네가 달리기App.vue를 할 때, 너는 이 두 개의 영어 단어를 볼 수 있을 것이다.지금까지 특별한 것은 없다.

환매 완료 구문 업로드 및 다운로드

영어 파일을 Localazy에 업로드합시다.루트 폴더에서 다음 명령 실행

localazy upload -s

npm run serve 매개 변수는simulate를 대표합니다.어떤 내용도 업로드하지 않은 상태에서 설정을 테스트하는 것은 의외의 상황이 발생하지 않도록 하는 좋은 방법이다. 예를 들어 일부 키 값이 정확하게 일치하지 않고 서로 덮어씌워지지 않도록 하는 것이다.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.

모든 것이 순조롭습니다. 우리의 영어 파일이 일치합니다.이번에는 우리가 진정으로 그것을 업로드합시다.

localazy upload

응용 프로그램 페이지를 새로 고치면 목록에서 영어를 볼 수 있을 것입니다.Add languages 탭을 열면 자동 번역 비율에 대한 정보가 포함된 언어가 있습니다.너는 50%나 100%를 볼 수 있을 것이다.ShareTM와의 자동 일치가 계속 개선되고 있습니다. 아마도 본문 때문에 모든 단어를 자동으로 번역할 수 있을 것입니다.이게 얼마나 멋있어?🙂

어쨌든, 독일어를 찾아서 응용 프로그램에 추가합니다.너는 회고 버튼이 있는 것을 볼 수 있을 것이다.ShareTM가 번역 제안을 할 때마다 후보 상태가 됩니다.이것은 어떤 심사자도 비준하거나 거절할 준비가 되어 있다는 것을 의미한다.제안된 구문을 계속하고 승인합니다.

ShareTM가 단어를 100% 번역하지 않으면 언어 목록으로 돌아가서 보기 단추가translate로 표시됩니다.Localazy는 심사할 필요가 없지만 번역할 내용이 있기 때문에 다음에 가장 가능성이 있는 조작을 제공합니다.다른 단어를 번역합니다. (번역 페이지에서 건의한 단어를 사용할 수 있습니다.)이번에는 심사 과정을 거칠 필요가 없다. 기본적으로 소유자로서 신뢰할 만한 번역가이기 때문에 번역은 즉시 비준을 받을 수 있다.
Vue 프로젝트로 돌아갈 때가 됐어요.

localazy download

이 명령을 사용하면 새로 수락한 모든 구문과 새로 추가된 언어를 다운로드할 수 있습니다.locales 폴더에서 새 -s 를 볼 수 있습니다.
마지막으로 해야 할 일은 업데이트de.json와 독일어 로케일 자원 파일을 추가하는 것이다.

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')

이 프로그램을 다시 실행할 때, 이 단어들이 독일어로 정확하게 번역된 것을 볼 수 있습니다.

끝말

나는 네가 이 vue-i18n으로 Localazy를 소개하는 단편 문장을 좋아하길 바란다.만약 당신이 우리에게 더 접근하고 싶다면, 전화를 걸어 우리에 가입하세요.
본문 최초 발표Discord