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>
