[vue] Vue-Cli 2.X / vue.js에서 다국어지원처리 (vue-i18n@8)

i18n 설치

- 현재 9버전까지 나온상태 

- vue 3버전 일 경우엔 9버전으로 설치해야합니다.

- 반대로 vue 2 이하 버전일 경우 8버전으로 설치해야 정상적으로 작동됩니다.  (최신버전으로 설치할 경우 esm.bundelr.js 경고가 뜨며 정상적으로 출력되지 않는다.)

// vue 2.X
npm install vue-i18n@8

// vue 3.X
npm install vue-i18n@9

 

locales/ko.json

- json파일을 통해 언어 별도 관리

- json파일에는 주석 사용불가

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "타이틀1",
        "ttl_2": "타이틀2",
        "ttl_3": "타이틀3"
    }
}

 

locales/en.json

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "ttl1",
        "ttl_2": "ttl_2",
        "ttl_3": "ttl_3"
    }
}

 

locales/i18n.js 

import Vue from "vue";
import VueI18n from "vue-i18n";
import en from "@/locales/en.json";
import ko from "@/locales/ko.json";

//import axios from 'axios'

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: "ko",
  fallbackLocale: "en",
  messages: { en, ko },
});

const loadedLanguages = ["ko"];

export function loadLanaguageAsync(lang) {
  if (i18n.locale === lang) {
    return Promise.resolve(lang);
  }

  if (loadedLanguages.includes(lang)) {
    return Promise.resolve();
  }
}

 

main.js

import Vue from "vue";
import App from "./App.vue";
// import router from "@/routes/index";
// import store from "@/store/index";
import { i18n } from "@/locales/i18n";

Vue.config.productionTip = false;

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

 

component.vue

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p>{{ $t("group.ttl1")}}</p>
    <p>{{ $t("group.ttl2")}}</p>
</template>

이때 태그내에 <em>,<b>,<br> 등의 style요소를 주기위한 태그들이 들어갈 경우 v-html을 사용하여 적용시켜준다,. 

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p v-html="$t('example')"></p>
    <p v-html="$t('group.ttl1')"></p>
    <p v-html="$t('group.ttl2')"></p>
</template>