![\"Vue](\"/assets/vue-logo.png\" "\\"Vue"){kind=logo}
단순히 번역 원고를 받아 글자 바꾸는 것보다 신경 써야 할 부분이 많다. 그 부분들을 통틀어 국제화(Internationalization; i18n) 라고 한다.
\n\n\ni18n은 어떤 프레임워크가 아니고 i와 n 사이에 18개의 알파벳이라는 뜻이다.
\n
vue-i18n 을 활용하여 날짜, 화폐, 문자열만 우선 다뤄 보도록 하겠다.
\nvue-i18n 라이브러리를 활용하여 3개국어를 지원하는 예시를 만들어 vue-i18n 이 어떻게 동작되는지 살펴 보도록 한다.
\nnpm install vue-i18ni18n.js
\nimport Vue from \"vue\"\nimport VueI18n from \"vue-i18n\"\n\nVue.use(VueI18n)\n\nfunction loadLocaleMessages() {\n const locales = require.context(\n \"./locales/message\",\n true,\n /[A-Za-z0-9-_,\\s]+\\.json$/i\n )\n const messages = {}\n locales.keys().forEach(key => {\n const matched = key.match(/([A-Za-z0-9-_]+)\\./i)\n if (matched && matched.length > 1) {\n const locale = matched[1]\n messages[locale] = locales(key)\n }\n })\n loadLocalDateTimeFormats()\n\n return messages\n}\n\nfunction loadLocalDateTimeFormats() {\n const locales = require.context(\n \"./locales/date\",\n true,\n /[A-Za-z0-9-_,\\s]+\\.json$/i\n )\n const messages = {}\n locales.keys().forEach(key => {\n const matched = key.match(/([A-Za-z0-9-_]+)\\./i)\n if (matched && matched.length > 1) {\n const locale = matched[1]\n messages[locale] = locales(key)\n }\n })\n\n return messages\n}\n\nfunction loadLocalNumberFormats() {\n const locales = require.context(\n \"./locales/number\",\n true,\n /[A-Za-z0-9-_,\\s]+\\.json$/i\n )\n const messages = {}\n locales.keys().forEach(key => {\n const matched = key.match(/([A-Za-z0-9-_]+)\\./i)\n if (matched && matched.length > 1) {\n const locale = matched[1]\n messages[locale] = locales(key)\n }\n })\n\n return messages\n}\n\nexport default new VueI18n({\n locale: process.env.VUE_APP_I18N_LOCALE || \"ko\",\n fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || \"ko\",\n messages: loadLocaleMessages(),\n dateTimeFormats: loadLocalDateTimeFormats(),\n numberFormats: loadLocalNumberFormats(),\n})main.js
\nimport i18n from \"./i18n\";\n.. code\n\nnew Vue({\n i18n\n .. code\n}).$mount(\"#app\");View/I18n.vue
\n<template>\n <div class=\"i18n\">\n <select v-model=\"$i18n.locale\" @change=\"onLocaleChange($event)\">\n <option v-for=\"lang in langs\" :value=\"lang.code\" :key=\"lang.code\">\n {{ lang.label }}\n </option>\n </select>\n <h2>Message localization</h2>\n <p>title : {{ $t(\"title\") }}</p>\n <p>title : {{ $t(\"hello\", { name: \"Your name\" }) }}</p>\n <h2>DateTime localization</h2>\n <p>origin : {{ sample.date }}</p>\n <p>short : {{ $d(sample.date, \"short\") }}</p>\n <p>long : {{ $d(sample.date, \"long\") }}</p>\n <h2>Number localization</h2>\n <p>origin : {{ sample.number }}</p>\n <p>currency : {{ $n(sample.number, \"currency\") }}</p>\n </div>\n</template>\n\n<script>\n export default {\n name: \"I18n\",\n components: {},\n data() {\n return {\n sample: {\n date: new Date(),\n number: 10000,\n },\n langs: [\n {\n code: \"en\",\n label: \"English\",\n },\n {\n code: \"ko\",\n label: \"한국어\",\n },\n ],\n }\n },\n methods: {\n onLocaleChange(event) {\n this.$i18n.locale = event.target.value\n },\n },\n }\n</script>\n\n<style scoped></style>// locales/date/en.json\n{\n \"short\": {\n \"year\": \"numeric\",\n \"month\": \"short\",\n \"day\": \"numeric\"\n },\n \"long\": {\n \"year\": \"numeric\",\n \"month\": \"long\",\n \"day\": \"numeric\",\n \"weekday\": \"long\",\n \"hour\": \"numeric\",\n \"minute\": \"numeric\"\n }\n}\n\n// locales/date/ko.json\n{\n \"short\": {\n \"year\": \"numeric\",\n \"month\": \"short\",\n \"day\": \"numeric\"\n },\n \"long\": {\n \"year\": \"numeric\",\n \"month\": \"long\",\n \"day\": \"numeric\",\n \"weekday\": \"long\",\n \"hour\": \"numeric\",\n \"minute\": \"numeric\",\n \"hour12\": true\n }\n}// locales/number/en.json\n{\n \"currency\": {\n \"style\": \"currency\",\n \"currency\": \"USD\"\n }\n}\n\n// locales/number/ko.json\n{\n \"currency\": {\n \"style\": \"currency\",\n \"currency\": \"KRW\"\n }\n}// locales/message/en.json\n{\n \"title\": \"title\",\n \"hello\": \"hello {name}\"\n}\n\n// locales/message/ko.json\n{\n \"title\": \"제목\",\n \"hello\": \"안녕 {name}\"\n}