Vue.js과 함께 일하는 것이 즐겁습니다. 디자인이 우아하고 결합할 수 있는 강력한 자사 추가 기능으로 브라우저 앱 구축이 즐거워집니다.

프로그레시브 JavaScript 프레임워크Vue.js의 가장 유명한 i18n 플러그인은 아마도 Vue I18n 입니다.

Kazuya, thank you for this great i18n plugin!

새 버전

Beside templates, directives, data binding, event handling, etc... with v3 Vue.js is now introducing also Composition API , Teleport , Fragments ... 그리고 Suspense .
Vue I18n용 Vue.js v3의 적절한 버전은 v9 입니다.

기본 vue-i18n 설정은 어떻게 생겼습니까?

그것에 들어가 보자 ...

전제 조건

Make sure you have Node.js and npm installed. It's best, if you have some experience with simple HTML, JavaScript and basic Vue.js, before jumping to vue-i18n .

시작하기

Take your own Vue.js project or create a new one, i.e. with the vue create cli command .

npx @vue/cli create vue-starter-project
# select vue 3 preset

vue-i18n 종속성을 설치해 보겠습니다.
npm install vue-i18n@9main.js 파일을 준비합시다.

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n';
import App from './App.vue'

export const i18n = createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages: {
    en: {
      message: {
        welcome: 'Welcome to Your Vue.js App'
      }
    },
    de: {
      message: {
        welcome: 'Willkommen zu Deiner Vue.js App'
      }
    }
  }
  // If you need to specify other options, you can set other options
  // ...
})

createApp(App).use(i18n).mount('#app')

이제 첫 번째 구성 요소TranslationShowCase.vue를 생성해 보겠습니다.

<template>
  <div class="hello">
    <h1>{{ $t("welcome") }}</h1>
  </div>
</template>

<script>
export default {
  name: 'TranslationShowCase'
}
</script>

...그리고 App.vue에서 해당 구성 요소를 사용합니다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <TranslationShowCase />
</template>

<script>
import TranslationShowCase from './components/TranslationShowCase.vue'

export default {
  name: 'App',
  components: {
    TranslationShowCase
  }
}
</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>

이제 다음과 같은 내용이 표시됩니다.

언어 전환기

Now we will create a language switcher to make the content change between different languages.

<template>
  <div class="hello">
    <h1>{{ $t("welcome") }}</h1>
  </div>
  <hr />
  <div>
    <div>
      <a v-if="$i18n.locale !== 'de'" v-on:click="changeLanguage('de')">DE</a>
      <strong v-if="$i18n.locale === 'de'">DE</strong>
      &nbsp;|&nbsp;
      <a v-if="$i18n.locale !== 'en'" v-on:click="changeLanguage('en')">EN</a>
      <strong v-if="$i18n.locale === 'en'">EN</strong>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TranslationShowCase',
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

🥳 좋습니다. 이제 막 첫 번째 언어 전환기를 만들었습니다!

구성 요소 보간 및 지시어

Now let's try component interpolation 및 translation directive:

<template>
  <div class="hello">
    <h1>{{ $t("welcome") }}</h1>
  </div>
  <p>
    <i18n-t keypath="descr" tag="label" for="doc">
      <a href="https://cli.vuejs.org" target="_blank">{{ $t('doc') }}</a>
    </i18n-t>
  </p>
  <div>
    <div>
      <span v-t="{path:'end'}" /> <!-- can also be written like: <i v-t="'end'" /> -->
    </div>
  </div>
  <hr />
  <div>
    <div>
      <a v-if="$i18n.locale !== 'de'" v-on:click="changeLanguage('de')">DE</a>
      <strong v-if="$i18n.locale === 'de'">DE</strong>
      &nbsp;|&nbsp;
      <a v-if="$i18n.locale !== 'en'" v-on:click="changeLanguage('en')">EN</a>
      <strong v-if="$i18n.locale === 'en'">EN</strong>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TranslationShowCase',
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

...번역에 새 키를 추가합니다.

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

export const i18n = createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages: {
    en: {
      message: {
        welcome: 'Welcome to Your Vue.js App',
        descr: 'For a guide and recipes on how to configure / customize this project, check out the {0}.',
        doc: 'vue-cli documentation',
        end: 'have fun!'
      }
    },
    de: {
      message: {
        welcome: 'Willkommen zu Deiner Vue.js App',
        descr: 'Eine Anleitung und Rezepte für das Konfigurieren / Anpassen dieses Projekts findest du in der {0}.',
        doc: 'vue-cli Dokumentation',
        end: 'habe Spass!'
      }
    }
  }
  // If you need to specify other options, you can set other options
  // ...
})

createApp(App).use(i18n).mount('#app')

결과는 다음과 같아야 합니다.

추가 초강대국은 어디에 있습니까?

Let's meet locizer ...

locizer은 locize 프로젝트의 데이터에 액세스하고 이를 응용 프로그램 내에서 사용하는 경량 모듈입니다.

What is locize?

이것은 어떻게 생겼습니까?

First you need to signup at locize 및 login .
그런 다음create a new project 번역을 찾아 추가합니다. importing the individual json files 또는 API을 통해 또는 CLI을 사용하여 번역을 추가할 수 있습니다.

코드 파일에 번역이 있으면 작동하지만 번역가에게는 적합하지 않습니다.
locize를 사용하면 코드에서 번역이 분리됩니다.

모든 번역을 가져오면 다음과 같아야 합니다.

이제 locizer을 설치하겠습니다.
npm install locizer
전용i18n.js 파일을 생성해 보겠습니다.

import { createI18n } from 'vue-i18n'
import locizer from 'locizer'

const namespace = 'messages' // your namespace name added in locize
locizer.init({
  projectId: 'your-locize-project-id'
})

export const i18n = createI18n({
  locale: locizer.lng, // locizer.lng is the language detected in your browser.
  fallbackLocale: 'en' // set fallback locale
  // If you need to specify other options, you can set other options
  // ...
})

// called from within setup hook in App.vue
export const loadMessagesPromise = new Promise((resolve, reject) => {
  locizer.loadAll(namespace, (err, messages) => {
    if (err) return reject(err);
    Object.keys(messages).forEach((l) => {
      i18n.global.setLocaleMessage(l, messages[l])
    })
    resolve(messages)
  })
})

이제 번역이 비동기식으로 로드되므로 loadMessagesPromise를 내보내고 App.vue에서 사용합니다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <TranslationShowCase />
</template>

<script>
import { loadMessagesPromise } from './i18n'
import TranslationShowCase from './components/TranslationShowCase.vue'

export default {
  name: 'App',
  components: {
    TranslationShowCase
  },
  // used in combination with Suspense.
  // useful when translations are not in-memory...
  async setup() {
    await loadMessagesPromise
    return {}
  }
}
</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>

또한 Vue.js의 새로운 기능Suspense을 사용합니다.
새 파일을 생성해 보겠습니다. 예: Suspenser.vue :

<template>
  <Suspense>
    <template #default>
      <App />
    </template>
    <template #fallback>
      <span>Loading...</span>
    </template>
  </Suspense>
</template>

<script>
import App from './App.vue'

export default {
  name: 'Suspenser',
  components: {
    App
  }
}
</script>

main.js 파일에서 사용하십시오.

import { createApp } from 'vue'
import { i18n } from './i18n'
import App from './Suspenser.vue'

createApp(App).use(i18n).mount('#app')

이제 번역이 로드되는 동안 대체 템플릿이 표시됩니다.

브라우저가 독일어로 구성된 경우 이제 언어가 기본적으로 자동으로 독일어로 설정되는 것을 볼 수 있습니다. locizer의 언어 감지 기능 때문입니다. 기타 언어 감지를 구성할 수 있습니다options.
기본적으로 언어 감지는 쿼리 매개변수 lng도 찾고 있으므로 다음 URL을 입력하여 테스트할 수도 있습니다. http://localhost:8080/?lng=de

누락된 번역 저장

I wish newly added keys in the code, would automatically be saved to locize.

Your wish is my command!

Extend the i18n.js file with the locize api-key and the handleMissing function:

import { createI18n } from 'vue-i18n'
import locizer from 'locizer'

const namespace = 'messages' // your namespace name added in locize
const apiKey = 'my-api-key' // used for handleMissing functionality, do not add your api-key in a production build
locizer.init({
  projectId: 'your-locize-project-id',
  apiKey
})

export const i18n = createI18n({
  locale: locizer.lng, // locizer.lng is the language detected in your browser.
  fallbackLocale: 'en' // set fallback locale
  // If you need to specify other options, you can set other options
  // ...
})

// called from within setup hook in App.vue
export const loadMessagesPromise = new Promise((resolve, reject) => {
  locizer.loadAll(namespace, (err, messages) => {
    if (err) return reject(err);
    Object.keys(messages).forEach((l) => {
      i18n.global.setLocaleMessage(l, messages[l])
    })
    resolve(messages)
  })
})

export function handleMissing (locale, key) {
  if (!apiKey) return
  if (locale !== locizer.referenceLng) return
  locizer.add(namespace, key, key)
}

And use it in the component:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <TranslationShowCase />
</template>

<script>
import { useI18n } from 'vue-i18n'
import { loadMessagesPromise, handleMissing } from './i18n'
import TranslationShowCase from './components/TranslationShowCase.vue'

export default {
  name: 'App',
  components: {
    TranslationShowCase
  },
  // used in combination with Suspense.
  // useful when translations are not in-memory...
  async setup() {
    useI18n().setMissingHandler(handleMissing)
    await loadMessagesPromise
    return {}
  }
}
</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>

Now, if you add a new key in your templates, <h2>{{ $t("How are you?") }}</h2> :

<template>
  <div class="hello">
    <h1>{{ $t("welcome") }}</h1>
    <h2>{{ $t("How are you?") }}</h2>
  </div>
  <p>
    <i18n-t keypath="descr" tag="label" for="doc">
      <a href="https://cli.vuejs.org" target="_blank">{{ $t('doc') }}</a>
    </i18n-t>
  </p>
  <div>
    <div>
      <span v-t="{path:'end'}" /> <!-- can also be written like: <i v-t="'end'" /> -->
    </div>
  </div>
  <hr />
  <div>
    <div>
      <a v-if="$i18n.locale !== 'de'" v-on:click="changeLanguage('de')">DE</a>
      <strong v-if="$i18n.locale === 'de'">DE</strong>
      &nbsp;|&nbsp;
      <a v-if="$i18n.locale !== 'en'" v-on:click="changeLanguage('en')">EN</a>
      <strong v-if="$i18n.locale === 'en'">EN</strong>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TranslationShowCase',
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>