Vue는 언어 전환을 구현합니다.

다국어 웹사이트 개발에서 언어 전환은 매우 중요한 기능입니다. 최신 프런트엔드 프레임워크인 Vue는 언어 전환 기능을 자연스럽게 구현할 수 있습니다. 이번 글에서는 Vue를 사용하여 언어 전환을 구현하는 방법을 소개하겠습니다.

1. 언어 전환의 원리

웹사이트에서 언어 전환을 구현하려면 다음 단계를 수행해야 합니다.

1. 언어 리소스 파일을 만들고 텍스트를 다른 파일에 저장합니다. 현재 언어 유형 로컬 저장소에 저장
2. Vue의 템플릿에서 해당 언어 리소스 파일을 사용하여 원본 텍스트를 대체합니다.
3. 2. 언어 전환 구현

언어 리소스 파일 생성

1. /src 디렉터리에 언어 리소스 파일을 저장할 lang 디렉터리를 만듭니다. 언어 리소스 파일은 JSON 형식 파일 또는 JS 형식 파일일 수 있습니다. 이 기사에서는 JSON 형식 파일을 사용합니다.

lang 디렉터리에 중국어 텍스트 리소스를 저장하기 위한 zh-cn.json 파일을 만듭니다. 내용은 다음과 같습니다.

{
  "welcome": "欢迎使用Vue",
  "description": "这是一个演示Vue实现语言切换的例子",
  "button_text": "切换语言"
}

그런 다음 lang 디렉터리에 en-us.json 파일을 생성하여 영어 텍스트 리소스를 저장합니다. 내용은 다음과 같습니다.

{
  "welcome": "Welcome to Vue",
  "description": "This is an example of implementing language switch with Vue",
  "button_text": "Switch Language"
}

현재 언어 유형 저장

Vuex 스토어에서는 localStorage를 사용하여 현재 언어 유형을 저장할 수 있습니다. store.js 파일에 다음 코드를 추가하세요.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    language: localStorage.getItem('language') || 'zh-cn', // 默认为中文
  },
  mutations: {
    // 切换语言类型
    switchLanguage(state, language) {
      state.language = language
      localStorage.setItem('language', language)
    },
  },
})

템플릿의 텍스트 바꾸기

Vue 구성 요소의 템플릿에서 $vuetify.lang.get 함수를 사용하여 해당 텍스트 리소스를 얻을 수 있습니다. $vuetify.lang은 텍스트 리소스를 얻기 위해 Vuetify에서 제공하는 개체입니다. 이 글에서는 Vue의 UI 프레임워크로 Vuetify를 사용하겠습니다.

<template>
  <div>
    <h1>{{ $vuetify.lang.t('welcome') }}</h1>
    <p>{{ $vuetify.lang.t('description') }}</p>
    <v-btn @click="toggleLanguage()">{{ $vuetify.lang.t('button_text') }}</v-btn>
  </div>
</template>

언어 전환 기능 구현

Vue 컴포넌트에서 언어 전환 기능을 정의해야 합니다. 이 기사에서는 중국어와 영어를 번갈아 사용하며 실제 필요에 따라 확장할 수 있습니다.

<script>
export default {
  methods: {
    // 切换语言
    toggleLanguage() {
      const language = this.$store.state.language === 'zh-cn' ? 'en-us' : 'zh-cn'
      this.$store.commit('switchLanguage', language)
      this.$vuetify.lang.current = language
    },
  },
}
</script>

나중에 해당 텍스트 리소스를 얻으려면 $vuetify.lang.current의 값을 현재 언어로 설정해야 한다는 점에 유의해야 합니다.

3. 전체 코드

<template>
  <div>
    <h1>{{ $vuetify.lang.t('welcome') }}</h1>
    <p>{{ $vuetify.lang.t('description') }}</p>
    <v-btn @click="toggleLanguage()">{{ $vuetify.lang.t('button_text') }}</v-btn>
  </div>
</template>

<script>
export default {
  methods: {
    // 切换语言
    toggleLanguage() {
      const language = this.$store.state.language === 'zh-cn' ? 'en-us' : 'zh-cn'
      this.$store.commit('switchLanguage', language)
      this.$vuetify.lang.current = language
    },
  },
}
</script>

4. 요약

이번 글에서는 Vue를 사용하여 언어 전환을 구현하는 방법을 소개했습니다. 언어 전환을 구현할 때 언어 리소스 파일을 생성하고 현재 언어 유형을 저장하고 템플릿의 텍스트를 바꿔야 합니다. 언어 전환을 구현하는 함수에서는 나중에 해당 텍스트 리소스를 얻을 수 있도록 $vuetify.lang.current의 값을 현재 언어로 설정해야 합니다.

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