i18n작업(Vue2)

현 nq-view에서 과거에 vue add로 추가되어 있는 i18n을 제거하고 재설치
- 제거하기 위해서는 한번더 vue add i18n 이후 npm uninstall vue-i18n로 진행하면 제거됨
- 제거후 npm install vue-i18n@8 진행(8버전까지는 vue2 9버전 이후는 vue3지원)
src > plugins에 i18n.js 추가
- 해당 파일에 불러올 언어별 파일 import (언어파일 형식은 json)

// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '@/locales/en.json'
import ko from '@/locales/ko.json'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'ko', //기본설정 언어
  fallbackLocale: 'ko', //기본설정 언어를 불러오지 못할때 사용할 언어
  messages: { en, ko }
})

src > locales 폴더 생성. 내부에 언어별 json파일 추가

//ko.json
{
    "button": {
      "add": "추가",
      "delete": "삭제"
    }
}

//en.json
{
    "button": {
      "add": "Add",
      "delete": "Delete"
    }
}

main.js에 import 추가 , new Vue에 i18n추가

//main.js
import i18n from './plugins/i18n'

/...

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

표시하고자 하는 곳에 작성. 예시함수처럼 this.$i18n.locale로 언어변경 가능


{{$t('button.add')}}
<button @click="changeLocale"></button>

//scipt
changeLocale() {
if (this.$i18n.locale === 'en') return (this.$i18n.locale = 'ko')
      this.$i18n.locale = 'en'
},


// v-text-field 등의 label에 적용시

<v-text-field :label="$t("원하는 텍스트")">
// v-data-table의 header에 적용시
this.header =[
	{
		text: this.$t('원하는 텍스트')
	}
]

사용예시

Untitled

json파일 작성 예시

Untitled

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enMonitoring from '@/locales/en/Monitoring.json'
import enEvent from '@/locales/en/Event.json'
import enConfig from '@/locales/en/Config.json'
import enCommonDialog from '@/locales/en/CommonDialog.json'
import enTask from '@/locales/en/Task.json'
import enFlow from '@/locales/en/Flow.json'
import enTool from '@/locales/en/Tool.json'
import enPolicy from '@/locales/en/Policy.json'
import enHome from '@/locales/en/LoginSetting.json'
import enGrid from '@/locales/en/Grid.json';

import koMonitoring from '@/locales/ko/Monitoring.json'
import koEvent from '@/locales/ko/Event.json'
import koConfig from '@/locales/ko/Config.json'
import koCommonDialog from '@/locales/ko/CommonDialog.json'
import koTask from '@/locales/ko/Task.json'
import koFlow from '@/locales/ko/Flow.json'
import koTool from '@/locales/ko/Tool.json'
import koPolicy from '@/locales/ko/Policy.json'
import koHome from '@/locales/ko/LoginSetting.json'
import koGrid from '@/locales/ko/Grid.json';

Vue.use(VueI18n)

const messages = {
  en: {
    Monitoring: enMonitoring,
    Tool:enTool,
    Task: enTask,
    Config: enConfig,
    Event: enEvent,
    Dialog: enCommonDialog,
    Flow: enFlow,
    Policy: enPolicy,
    Home: enHome,
    Grid: enGrid
  },
  ko: {
    Monitoring: koMonitoring,
    Tool:koTool,
    Task: koTask,
    Config: koConfig,
    Event: koEvent,
    Dialog: koCommonDialog,
    Flow: koFlow,
    Policy: koPolicy,
    Home: koHome,
    Grid: koGrid
  },
  
};

const browserLanguage = navigator.language.split('-')[0] || navigator.userLanguage.split('-')[0]

// 기본 언어 설정
const defaultLocale = browserLanguage === 'ko' ? 'ko' : 'en'

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

main.js

Untitled