Vue를 사용하여 다국어 및 국제화를 달성하는 방법은 무엇입니까?

세계화가 발전하면서 다국어 및 국제화가 점차 웹사이트나 애플리케이션의 필수 기능 중 하나로 자리잡고 있습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 이와 관련하여 유연한 솔루션도 제공합니다. 이 기사에서는 Vue를 사용하여 다국어 및 국제화를 달성하는 방법을 소개합니다.

1. Vue-i18n 설치

Vue-i18n은 다국어 및 국제화를 달성하는 데 도움이 되는 Vue.js용 국제화 플러그인입니다. 먼저 프로젝트에 Vue-i18n을 설치해야 합니다.

npm install vue-i18n --save

2. 언어 파일 생성

프로젝트에 언어 파일을 저장할 i18n 폴더를 생성하세요.

Vue-i18n을 구성하려면 i18n 폴더에 index.js라는 파일을 생성하세요.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});

export default i18n;

위 코드에서 locale은 현재 사용되는 언어를 나타내며, 기본적으로 영어가 사용됩니다. message는 사용된 언어 파일을 나타내며, 여기서 en.json(영어) 및 zh.json(중국어)이 각각 소개됩니다.

이제 i18n 폴더에 en.json 및 zh.json 파일을 생성하고 언어 콘텐츠를 작성할 수 있습니다.

en.json

{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

zh.json

{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

3. Vue-i18n 사용

구성 요소에서 Vue-i18n을 사용하는 것은 매우 간단합니다. 템플릿에 $tc(번역) 또는 $t(형식 지정)만 추가하면 됩니다. .

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n';

export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

위 코드에서는 $t와 $tc를 모두 번역에 사용할 수 있습니다. 차이점은 $t는 형식화할 수 있고 $tc는 매개변수에 따라 복수화할 수 있다는 것입니다. 또한 계산된 속성에서 $t 메소드를 사용하고 구성요소의 생성된 라이프사이클에서 언어를 수정하는 방법을 보여줍니다.

4. Vue CLI 플러그인 사용

Vue CLI는 다국어 및 국제화를 빠르게 통합할 수 있는 공식 플러그인 vue-cli-plugin-i18n을 제공합니다.

먼저 플러그인을 설치해야 합니다.

vue add i18n

설치가 성공적으로 완료되면 프로젝트에 언어 파일을 저장하기 위한 locales 폴더가 생성됩니다.

src/i18n.js 파일을 수정하세요.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,s]+.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true,
});

위 코드에서 loadLocaleMessages 함수는 locales 폴더에 있는 언어 파일을 자동으로 로드하고 메시지 객체를 반환하는 데 사용됩니다. 또한 기본 언어와 대체 언어는 환경 변수 VUE_APP_I18N_LOCALE 및 VUE_APP_I18N_FALLBACK_LOCALE을 통해 설정할 수 있습니다.

키 값이 존재하는지 확인하려면 컴포넌트의 $te 메소드를 사용하고, 날짜 형식을 지정하려면 $d 메소드를 사용하세요.

<template>
  <div>
    <p v-if="$te('hello')">Hello</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

<script>
export default {};
</script>

위는 Vue를 사용하여 다국어 및 국제화를 달성하는 기본 방법입니다. Vue-i18n 플러그인이나 Vue CLI 플러그인을 통해 다국어 및 국제화 기능을 쉽게 구현할 수 있어 웹사이트나 애플리케이션이 세계화 추세에 더욱 부합하도록 만들 수 있습니다.

위 내용은 Vue를 사용하여 다국어 및 국제화를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!