Development/Vue.js

[Vue.js] 다국어 처리(i18n)

Rosie, Lee 2022. 4. 29. 18:36

Vue I18n 모듈 사용하여 다국어 처리를 할 수 있습니다.

아래 공식 문서를 참고해주세요.

https://kazupon.github.io/vue-i18n/installation.html#compatibility-note

 

Installation | Vue I18n

Installation Compatibility Note Direct Download / CDN https://unpkg.com/vue-i18n@8 (opens new window) unpkg.com (opens new window) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific vers

kazupon.github.io

 

i18n이란, 국제화를 뜻합니다.

https://ko.wikipedia.org/wiki/%EA%B5%AD%EC%A0%9C%ED%99%94%EC%99%80_%EC%A7%80%EC%97%AD%ED%99%94

 

국제화와 지역화 - 위키백과, 우리 모두의 백과사전

국제화와 지역화는 출판물이나 하드웨어 또는 소프트웨어 등의 제품을 언어 및 문화권 등이 다른 여러 환경에 대해 사용할 수 있도록 지원하는 것을 의미한다. 이때 국제화는 제품 자체가 여러

ko.wikipedia.org

 

1. vue cli로 모듈을 설치해줍니다.

vue add i18n

설치가 완료되면, 루트 폴더에 vue.config 파일, .env파일, i18n,js, src폴더에 locales폴더가 생성됩니다.

main.js 파일에도 자동으로 import 해줍니다.

안되었다면, 4번을 확인해주세요.

 

2. vue.config 확인

module.exports={
    pluginOptions: {
      i18n: {
        locale: 'en',
        fallbackLocale: 'en',
        localeDir: 'locales',
        enableInSFC: false
      }
    },
    chainWebpack: config => {
        config.module
            .rule("i18n")
            .resourceQuery(/blockType=i18n/)
            .type('javascript/auto')
            .use("i18n")
            .loader("@kazupon/vue-i18n-loader")
            .end();
    }
}

 

3. src > locales 폴더에 언어 json 파일 생성 

저는 영문과 국문 두가지를 사용할 예정이라서 ko.json파일과 en.json 파일을 생성해주었습니다.

json 파일에 사용할 텍스트를 작성해주세요.

// en.json
{
  "message": "hello i18n !!"
}
// ko.json
{
  "message": "안녕!!"
}

 

4. main.js import

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import "./main.css";
import i18n from './i18n' // 다국어 사용

const app = createApp(App).use(i18n) // 다국어 사용
app.use(router)
app.mount('#app')

 

4. 컴포넌트에서 사용하는 방법

버튼 클릭하면 ko와 en이 토글되는 방식으로 사용하였습니다.

<template>
    <button @click="changeLanguage()">Language</button>
    <p>{{$t('message')}}</p>
</template>

...

<script>
methods: {
    changeLanguage(){
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'ko' : 'en'
    }
  }
</script>

 

혹시 기본 언어 설정을 바꾸고 싶다면, .env와 i18n.js파일 에서 기본 언어를 변경해주세요. (ko or en)

// .env
VUE_APP_I18N_LOCALE=ko
VUE_APP_I18N_FALLBACK_LOCALE=ko
// i18n.js 
import { createI18n } from 'vue-i18n'

...

export default createI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'ko',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'ko',
  messages: loadLocaleMessages()
})

기본으로는 'ko' 파일을 사용(lacale)하고, ko파일에서 없다면 (fallbackLocale), 'ko' 파일로 대체해준다는 의미입니다.

반응형