VueJS-국제화

인터넷이 번영한 이래로 매일 점점 더 많은 웹 응용 프로그램이 발표되고 있다(매일 약 576k개의 새로운 사이트가 있다*).현재 인터넷에는 17억 개의 사이트가 있는데 그 중 많은 사이트가 세계 각지의 사람들에게 방문되고 있다.
아마도, 만약 당신이 사이트를 만들면, 가능한 한 많은 사람들이 방문하기를 원할 것이다.이 점을 실현하고 사용자에게 좋은 체험을 제공하려면 어떻게 다른 언어로 제공하는지 고려해야 한다.
* 자료 출처: Website Setup

TL；박사 01 명

이 문서에서는 다음과 같은 내용을 설명합니다.

은 VueJS과 Vue i18n을 이용하여 다국어 사이트를 창설한다.

언어 전환기 구현;

은 vuex-persistedstate 패키지를 사용하여 페이지를 다시 불러올 때 분실 상태를 피한다.

국제화 (i18n)

몇 가지 기본 개념부터 시작합시다.
만약 당신이 국제화나 i18n의 진정한 의미를 아직 모른다면 이것은 그의 공식 정의이다.

Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.
(Source: W3.org)

국제화는 보통 i18n(영어)으로 쓰는데 그 중 18은 영어 단어 중'i'와'n'사이의 자모수(쿨, 그렇지?!)이다.

Vue i18n

인터넷에서 빠른 검색을 하면 VueJS로 구축된 사이트나 응용 프로그램에서 i18n을 실현할 수 있는 해결 방안을 찾을 수 있습니다.
가장 유명하고 사용하기 쉬운 것은 Vue i18n일 것이다. 이것은 VueJS의 소스 플러그인으로 사이트의 서로 다른 목표 언어의 번역을 실현하기 위해 매우 우호적인 API를 제공한다.

장치

VueJS 프로젝트를 만들었다면 (어디서부터 시작해야 할지 모르면 시도해 보십시오) 플러그인을 사용하기 시작하는 첫 번째 단계는 설치하는 것입니다.터미널 창에서 항목의 루트 디렉토리로 이동하고 다음 명령을 실행합니다.

yarn add vue-i18n --save

프로젝트 구성에 따라 NPM을 사용할 수도 있습니다.

프로비저닝

Vue i18n 패키지는 매우 간단하게 작동합니다.
몇 가지 구성을 설정할 수 있지만 이러한 구성은 프로젝트 실행에 필요한 기본 구성입니다.

초기 언어: 기본적으로 불러오는 언어;

메시지: 간단한 JSON 대상으로 각 언어에 사용되는 메시지(번역키)를 포함한다.

먼저 폴더 구조를 만들고 모든 컨텐트를 함께 배치합니다.

은 프로젝트의 i18n 디렉터리에 src이라는 폴더를 만듭니다.

은 i18n 폴더에 index.js 파일과 messages이라는 폴더를 만듭니다.

첫 번째 index.js 파일의 모습입니다.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './messages'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  messages
})

이 예에서 우리는 응용 프로그램의 일부분을 구축할 것이다. 그것은 세 가지 다른 언어로 납품해야 한다. 그것이 바로 영어 (기본값), 스페인어, 브라질 포르투갈어이다.

messages 폴더에 en, es, pt-BR이라는 세 개의 폴더를 만들고 각 폴더에 두 개의 파일을 만든다. 하나는 menu.js이고 다른 하나는 index.js이다.
이러한 파일은 다음과 같습니다.
영어.

// /src/i18n/messages/en/menu.js

export default {
  home: 'Home',
  about: 'About',
  contact: 'Contact'
}

// /src/i18n/messages/en/index.js

import menu from './menu'

export default {
  menu
}

스페인의

// /src/i18n/messages/es/menu.js

export default {
  home: 'Pagina de Inicio',
  about: 'Acerca de',
  contact: 'Contacto'
}

// /src/i18n/messages/es/index.js

import menu from './menu'

export default {
  menu
}

포르투갈어 (브라질)

// /src/i18n/messages/pt-BR/menu.js

export default {
  home: 'Início',
  about: 'Sobre',
  contact: 'Contato'
}

// /src/i18n/messages/pt-BR/index.js

import menu from './menu'

export default {
  menu
}

필요하면 messages 대상에서 더 많은 등급을 만들어서 그것들을 더욱 잘 조직할 수 있다.이렇게:

export default {
  links: {
    home: {
      label: 'Home',
      help: 'Click here to go to home page'
    },
    about: {
      label: 'About',
      help: 'Click here to know more about us'
    },
    contact: {
      label: 'Contact',
      help: 'Click here to go to reach out to us'
    }

  }
}

은 messages 폴더에 다음과 같이 index.js 파일을 만듭니다.

import en from './en'
import es from './es'
import ptBR from './pt-BR'

export default {
  en,
  es,
  'pt-BR': ptBR
}

파일에서 main.js 패키지를 가져오고 Vue 인스턴스로 설정합니다.

import App from './App.vue'
import i18n from './i18n' 

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

이제 응용 프로그램에서 vue-i18n 플러그인을 사용할 수 있습니다.간단한 장면을 만들어서 사용하자.

구현

우리는 언어 전환기를 실현하여 페이지 맨 위에 있는 내비게이션 표시줄에 넣을 것이다.이 스위치는 Vuex+Vuex 영구 상태를 사용하여 응용 프로그램의 현재 로케일을 설정합니다.
일을 더욱 간단하게 하기 위해서 나는 Bootstrap Vue을 사용하기로 했다.만약 네가 아직 모른다면, 한 번 볼 만하다.Vue 어셈블리에 포함된 모든 Bootstrap 구성 요소를 제공합니다.
구성 요소를 만들기 전에 기본 Vuex 모듈을 구성합니다. 이 모듈은 언어 상태를 관리하고 Vuex Persisted State 플러그인을 사용하여 페이지를 새로 고칠 때 사용자가 선택한 언어를 잃어버리지 않도록 로컬 메모리에 상태를 쉽게 저장합니다.

프로젝트에 i18n을 추가하려면 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다.

yarn add  vuex-persistedstate --save

은 Vuex Persist 디렉토리에 index.js이라는 파일과 store이라는 폴더를 만듭니다.

은 src에 modules이라는 폴더를 만듭니다.

은 store 폴더에 locale.js이라는 파일을 만들고 다음과 같이 수행합니다.

// src/store/modules/locale.js

export default {
  namespaced: true,
  state: {
    locale: 'en'
  },
  mutations: {
    setLocale(state, locale) {
      state.locale = locale
    }
  }
}

다음은 modules의 모양입니다.

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import locale from './modules/locale'

const persistedState = createPersistedState({
  key: 'vuejs-vue-i18n',
  paths: ['locale']
})

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    locale
  },
  plugins: [persistedState]
})

이제 store/index.js 구성 요소를 살펴보겠습니다.사용 가능한 모든 언어가 저장되고 Vuex helpers 함수를 사용하여 현재 언어가 업데이트됩니다.

<!-- src/components/LanguageSwitcher.vue (template) -->
<template>
  <b-nav-item-dropdown :text="currentLocale" right>
    <b-dropdown-item
      :disabled="isCurrentLocale('en')"
      @click="onSetLocale('en')"
    >
      EN
    </b-dropdown-item>
    <b-dropdown-item
      :disabled="isCurrentLocale('es')"
      @click="onSetLocale('es')"
    >
      ES
    </b-dropdown-item>
    <b-dropdown-item
      :disabled="isCurrentLocale('pt-BR')"
      @click="onSetLocale('pt-BR')"
    >
      PT-BR</b-dropdown-item
    >
  </b-nav-item-dropdown>
</template>

// src/components/LanguageSwitcher.vue (script)

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'LanguageSwitcher',
  computed: {
    ...mapState('locale', ['locale']),
    currentLocale() {
      return this.locale.toUpperCase()
    }
  },
  created() {
    this.$i18n.locale = this.locale
  },
  methods: {
    ...mapMutations('locale', ['setLocale']),
    onSetLocale(locale) {
      this.$i18n.locale = locale
      this.setLocale(locale)
    },
    isCurrentLocale(locale) {
      return this.locale === locale
    }
  }
}
</script>

이제 가장 최근에 생성된 LanguageSwitch.vue 구성 요소를 배치하기 위한 간단한 Navbar.vue 구성 요소를 만듭니다.
이 예에서는 Vue i18n 플러그인에서 제공하는 전역 LanguageSwitcher 도움말을 사용하여 현재 로켈에 따라 정확한 번역이 필요합니다.
그것의 사용은 매우 간단하다. 너는 단지 한 가지 일을 할 수 있다. 그것은 번역 키를 매개 변수로 전달하는 것이라고 부른다.

예:

{{ $t('translation.key') }}

필요한 경우 구성 요소의 $t 섹션에서도 사용할 수 있습니다.

{
  computed: {
    label() {
       // For this work, you have to create a file named `common.js` inside the folder of each language and export it in its respective `index.js` file.
       return this.$t('common.label')
    }
  },
  methods: {
    getTitle() {
       return this.$t('common.title')
    }
  }
}

이것이 바로 script 구성 요소의 모양입니다.

<!-- src/components/Navbar.vue (template) -->
<template>
  <b-navbar toggleable="lg" type="dark" variant="primary">
    <b-navbar-brand>VueJS vue-i18n</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse" />

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item :to="{ name: 'Home' }">
          {{ $t('navbar.home') }}
        </b-nav-item>
        <b-nav-item :to="{ name: 'About' }">
          {{ $t('navbar.about') }}
        </b-nav-item>
        <b-nav-item :to="{ name: 'Contact' }">
          {{ $t('navbar.contact') }}
        </b-nav-item>
      </b-navbar-nav>

      <b-navbar-nav class="ml-auto">
        <LanguageSwitcher />
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<!-- src/components/Navbar.vue (script) -->
<script>
import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher'

export default {
  name: 'Navbar',
  components: {
    LanguageSwitcher
  }
}
</script>

Navbar.vue 구성 요소를 생성하여 Layout.vue을 수용하고 다음 뷰에서 사용할 예정입니다.

<!-- src/views/Layout.vue (template) -->
<template>
  <b-row>
    <b-col>
      <Navbar />
      <b-container>
        <slot />
      </b-container>
    </b-col>
  </b-row>
</template>

// src/views/Layout.vue (script)

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'Layout',
  components: {
    Navbar
  }
}
</script>

은 모든 것을 정상적으로 하기 위해 Navbar 구성 요소를 만들어 Layout 파일에 추가해야 합니다.
이 섹션에서는 Vue i18n 패키지

에서 제공하는 글로벌 router/index.js 도움말을 사용하는 것이 가장 중요합니다.
src/components/Home.vue

<template>
  <Layout>
    <h1>{{ $t('navbar.home') }}</h1>
  </Layout>
</template>

<script>
import Layout from './Layout'

export default {
  name: 'HomeView',
  components: {
    Layout
  }
}
</script>

src/components/About.vue

<template>
  <Layout>
    <h1>{{ $t('navbar.about') }}</h1>
  </Layout>
</template>

<script>
import Layout from './Layout'

export default {
  name: 'AboutView',
  components: {
    Layout
  }
}
</script>

src/부품/접점.vue

<template>
  <Layout>
    <h1>{{ $t('navbar.contact') }}</h1>
  </Layout>
</template>

<script>
import Layout from './Layout'

export default {
  name: 'ContactView',
  components: {
    Layout
  }
}
</script>

Vue I18n은 다음 그림과 같이 네스트된 번역 키를 사용하기 위해 간단합니다.

<template>
  <Layout>
    <h1>{{ $t('navbar.links.contact.label') }}</h1>
  </Layout>
</template>

src/공유기/인덱스.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About')
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import('@/views/Contact')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

다음은 완전히 구현된 애플리케이션의 작동 방식입니다.
VueJS Internationalization Sample Video
당신은 this link에서 완전한 작업 소스 코드를 찾을 수 있습니다!

기타 기능

Vue I18n은 간단한 텍스트 세그먼트 번역 외에도 다음과 같은 유용한 기능을 제공합니다.

Formatting Interpolation

Pluralization

Date Time Localization

Number Localization

도구에 대한 자세한 내용은 website을 참조하십시오.
니가 좋아했으면 좋겠어.
댓글과 공유를 올려주세요!
표지 사진: Ben White