i18n을 사용하여 Vue에서 다국어 전환을 구현하는 팁

국제화가 지속적으로 발전함에 따라 점점 더 많은 웹사이트와 애플리케이션이 다중 언어 전환 기능을 지원해야 합니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 다중 언어 전환을 달성하는 데 도움이 되는 i18n이라는 플러그인을 제공합니다. 이 기사에서는 i18n을 사용하여 Vue에서 다중 언어 전환을 달성하는 일반적인 기술을 소개합니다.

1단계: i18n 플러그인 설치

먼저 npm 또는 Yarn을 사용하여 i18n 플러그인을 설치해야 합니다. 명령줄에 다음 명령을 입력하세요:

npm install vue-i18n --save

또는

yarn add vue-i18n

2단계: i18n

구성 Vue 프로젝트에서는 main.js에 i18n을 도입하고 몇 가지 기본 구성을 수행해야 합니다. 예는 다음과 같습니다.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'en-us', // 默认语言为英语
    fallbackLocale: 'zh-cn', // 如果当前语言没有在 locale 对象中找到，则使用 fallbackLocale 作为备选语言
    messages: {
        'zh-cn': require('./locales/zh-cn.json'),
        'en-us': require('./locales/en-us.json')
    }
})

위 코드에서는 new VueI18n()을 통해 i18n 객체를 인스턴스화하고 기본 언어 로케일 'en-us'와 대체 언어 fallbackLocale을 지정합니다. 'zh-cn'입니다. message 속성은 지원해야 하는 모든 언어를 나열하는 객체로, JSON 파일을 사용하여 각 언어에 해당하는 번역 정보를 저장합니다. new VueI18n() 实例化了一个 i18n 对象，并且指定了一个默认语言 locale 为 'en-us'，和一个备选语言 fallbackLocale 为 'zh-cn'。messages 属性是一个对象，用来列举所有需要支持的语言，并用 JSON 文件存储各语言对应的翻译信息。

在上述代码中，我们将中文翻译信息保存在 locales/zh-cn.json 文件中，将英文翻译信息保存在 locales/en-us.json 文件中。接下来，我们需要分别对这两个文件进行翻译信息的填写。

第三步：填写语言翻译信息

在 locales/zh-cn.json 文件中，我们可以按照以下方式编写翻译信息：

{
    "Welcome": "欢迎使用 Vue",
    "Hello": "你好，世界！"
}

在 locales/en-us.json 文件中，我们可以按照以下方式编写翻译信息：

{
    "Welcome": "Welcome to Vue",
    "Hello": "Hello, world!"
}

在以上示例中，"Welcome" 和 "Hello" 是翻译的键（key），后面的字符串则是翻译后的文本（value）。

注：有关于如何翻译您的内容的详细信息，请自行查找翻译资料。

第四步：使用翻译信息

一旦 i18n 已经配置好，我们就可以在 Vue.js 组件中使用翻译信息了。在示例代码中，我们使用 $t() 方法来实现翻译。我们只需要在需要翻译的文本前加上 $t() 方法即可。

示例代码如下：

<template>
  <div>
    <h1 id="t-Welcome">{{$t('Welcome')}}</h1>
    <p>{{$t('Hello')}}</p>
  </div>
</template>

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

在上述代码中，我们可以发现两个文本区块都使用了 $t() 方法进行了翻译，而 "Welcome" 和 "Hello" 则是在 JSON 文件中已经定义好的翻译键。

如果你要更改当前语言，你可以在组件中定义一个方法来更新 $i18n.locale 属性。例如，如果想切换为英文，可以通过下面的代码实现：

this.$i18n.locale = 'en-us'

第五步：使用语法糖

Vue-i18n 还提供了一些语法糖，简化了一些常见用例的实现。

例如，我们可以使用 $t()

위 코드에서는 locales/zh-cn.json 파일에 중국어 번역 정보를, locales/en-us.json 파일에 영어 번역 정보를 저장했습니다. 다음으로, 이 두 파일에 대한 번역 정보를 각각 입력해야 합니다.

3단계: 언어 번역 정보 입력

locales/zh-cn.json 파일에 다음과 같이 번역 정보를 작성할 수 있습니다.

<template>
  <div>
    <h1 id="t-Welcome-name-userName">{{ $t('Welcome', { name: userName }) }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userName: 'Alice'
    }
  },
}
</script>

locales/en-us.json 파일에 다음과 같이 작성할 수 있습니다. 번역 정보는 다음과 같습니다. 번역 정보 작성 방법: 🎜rrreee🎜위 예에서 "Welcome"과 "Hello"는 번역 키이고, 다음 문자열은 번역된 텍스트(값)입니다. 🎜🎜참고: 콘텐츠 번역 방법에 대한 자세한 내용을 보려면 번역 리소스를 직접 찾아보세요. 🎜🎜4단계: 번역 정보 사용🎜🎜i18n이 구성되면 Vue.js 구성 요소에서 번역 정보를 사용할 수 있습니다. 샘플 코드에서는 $t() 메서드를 사용하여 번역을 구현합니다. 번역해야 하는 텍스트 앞에 $t() 메서드만 추가하면 됩니다. 🎜🎜샘플 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서 두 텍스트 블록 모두 $t() 메서드를 사용하여 번역되었으며 "Welcome"과 "Hello"가 이미 JSON 파일에 정의되어 있는 것을 확인할 수 있습니다. 번역 키. 🎜🎜현재 언어를 변경하려면 구성 요소에서 $i18n.locale 속성을 ​​업데이트하는 메서드를 정의할 수 있습니다. 예를 들어 영어로 전환하려면 다음 코드를 사용하면 됩니다. 🎜rrreee🎜5단계: 구문 설탕 사용🎜🎜Vue-i18n은 일부 일반적인 사용 사례의 구현을 단순화하기 위해 몇 가지 구문 설탕도 제공합니다. 🎜🎜예를 들어 $t() 메서드를 사용하여 번역된 텍스트를 변수와 함께 표시할 수 있습니다. 예: 🎜rrreee🎜위의 예에서는 Vue 구성 요소의 data() 메서드를 사용하여 userName이라는 변수를 정의한 다음 $t() 메서드의 두 번째 매개 변수에서 변수를 참조합니다. 예를 들어 "Welcome, Alice!"와 같은 텍스트를 동적으로 번역합니다. 🎜🎜요약🎜🎜i18n 플러그인을 사용하는 것은 Vue에서 다중 언어 전환을 구현하는 데 널리 사용되는 방법입니다. i18n 플러그인을 사용하여 구성 및 언어 번역 정보를 완료한 후 구성 요소의 $t() 메서드를 사용하여 번역된 텍스트를 표시할 수 있습니다. 구현 중에 구문 설탕을 사용하여 일반적인 사용 사례를 단순화할 수도 있습니다. 이 기사가 Vue.js에서 i18n을 사용하는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 i18n을 사용하여 Vue에서 다국어 전환을 구현하는 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!