Nuxt의 궁극적인 국제화 솔루션: I18n+Nuxt Content
해외 진출이 붐을 이루면서 중국에서 널리 사용되는 Vue와 Nuxt는 국제화 문제에 직면하는 경우가 많습니다.
WordPress라면 간단합니다. 플러그인을 설치하고 Google의 번역 인터페이스를 구성하면 시스템이 매일 새로운 콘텐츠를 다양한 언어 버전으로 자동 번역합니다.
그러나 다른 시스템의 경우에는 그렇게 편리하지 않습니다.
코드는 오픈 소스입니다: https://github.com/aigc-projects/nuxt-i18n-starter
1. 기본 국제화 - I18n
nuxt-i18n
1. I18n이 무엇인가요?
I18n은 Nuxt 국제화를 위한 필수 요소입니다. 주로 국제화 라우팅 및 국제화 라우팅을 기반으로 하는 언어 변경 방법을 포함하여 완전한 국제화 솔루션 세트를 제공합니다.
2. I18n 설치
다음은 모두 괜찮습니다.
원사 추가 @nuxtjs/i18n # 원사 npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm add @nuxtjs/i18n@next --save-dev3. nuxt.config.ts 구성
module: [ '@nuxtjs/i18n', ], i18n: { locales: [ { name: "English",code: "en", iso: "en-US", dir: "ltr" }, { name: " español",코드: "es", iso: "es-LA", dir: "ltr" }, { 이름: "En français",코드: "fr", iso: "fr-FR", dir: "ltr " }, { name: "العربية", code: "ar", iso: "ar-EG", dir: "rtl" },], defaultLocale: "en", discoverBrowserLanguage: false, // 👇 Vue I18n 참조 구성 파일 vueI18n: "./i18n.config.js", }, 4. i18n.config.ts 구성
새로운 i18n.config.ts 또는 i18n.config.js 생성
이 파일은 번역 필드를 구성하는 데 사용됩니다.
기본 defineI18nConfig(() => ({legacy: false, // 👇 번역 메시지 추가: { "en": { nav_about: "About", }, "es": { nav_about: "sobre", }, "ar": { nav_about: "نبجة عنا", }, "fr": { nav_about: "정보", }, }, }))
5. 링크 구성요소
암호
용법
{{ $t('nav_home') }}
6. 언어 전환 구성 요소
암호
<!-- components/LangSwitcher.vue -->
<script setup lang="ts">
// Used for type casting
// Used for type casting
import type { LocaleObject } from "@nuxtjs/i18n/dist/runtime/composables";
// Get active locale and supported locales
const { locale, locales } = useI18n()
// Cast to avoid TypeScript errors in template
const supportedLocales = locales.value as Array<LocaleObject>
const router = useRouter()
const switchLocalePath = useSwitchLocalePath()
// When the visitor selects a new locale, route to
// to the new locale's path e.g. /en-CA/foo → /ar-EG/foo
function onLocaleChanged(event: Event) {
const target = event.target as HTMLInputElement
// switchLocalePath('ar-EG') will return Arabic equivalent
// for the *current* URL path e.g. if we're at /en-CA/about,
// switchLocalePath('ar-EG') will return '/ar-EG/about'
router.push({ path: switchLocalePath(target.value) })
}
</script>
<template>
<div>
🌐
<select :value="locale" @change="onLocaleChanged">
<option v-for="loc in supportedLocales" :key="loc.code" :value="loc.code">
{{ 위치 이름 }}
</option>
</select>
</div>
</template>
용법
페이지 또는 레이아웃에 태그를 사용합니다.
7. 현재 언어 가져오기
context.app.i18n.locale // NuxtContext에 액세스할 수 있는 곳 this.$i18n.locale //컴포넌트 $i18n.locale // 템플릿2. 문서 내용의 국제화
I18n만 사용하면 전체 사이트의 국제화를 완전히 달성할 수 있습니다. 하지만 웹사이트에 기사가 많으면 i18n.config.ts에 많은 구성 항목을 작성해야 하는데 이는 상당히 번거로운 작업입니다.
물론 기사 내용이 백엔드 데이터베이스에서 나온 경우에는 이를 고려할 필요가 없으며 번역된 내용을 데이터베이스에 저장하고 다른 언어 페이지에 대해 해당 언어의 기사 버전을 얻으면 됩니다.
여기서 말하는 내용은 기사 내용이 백엔드 데이터베이스에 있는 것이 아니라 프런트엔드에 있다는 것입니다.
nuxt의 경우 가장 좋은 방법은 nuxt 콘텐츠를 사용하는 것입니다. 간단히 말하면, 모든 글은 마크다운 파일에 저장되어 있으며, 특정 경로가 열리면 해당 경로에 해당하는 페이지와 마크다운 파일이 로드됩니다.
홈페이지와 같은 동일한 페이지가 언어에 따라 다른 경로를 사용하기 때문입니다.
예를 들어 기본값은 영어입니다. 홈페이지는 www.xxx.com이고 스페인어 버전은 www.xxx.com/es입니다.
따라서 www.xxx.com은 페이지 디렉터리에서 index.vue를 호출하고 콘텐츠 디렉터리에서 index.md를 로드합니다. 그러나 www.xxx.com/es는 페이지 디렉토리에서 index.vue를 호출하고 컨텐츠 디렉토리에 es.md 문서를 로드합니다.
따라서 동일한 기사의 다른 언어 버전에 대해서는 콘텐츠 디렉터리의 경로에 따라 해당 버전의 번역 파일을 생성하기만 하면 됩니다.
1. Nuxt 콘텐츠 설치
pnpm @nuxt/content 추가
2. nuxt.config.ts 구성
모듈: [ '@nuxt/content' ], 콘텐츠: { // ... 옵션 }3. 페이지에서 해당 번역 문서를 호출합니다.
홈페이지는 기본적으로 영어로 되어 있으며, 스페인어 노선과 페이지가 구성되어 있습니다.
최종 경로는 다음과 같습니다.
기본 홈페이지(영어): www.xxx.com
스페인어 홈페이지: www.xxx.com/es
먼저 콘텐츠 파일 디렉터리를 디자인합니다.
//콘텐츠 디렉토리 디자인 | 페이지 .index.vue 콘텐츠 .index.md .es.md
그런 다음 홈페이지에서 기사를 호출해야 하는 부분에 태그를 추가하세요.
<ContentDoc />3. 국제 라우팅 모범 사례
en-US, en은 영어를 의미하고, US는 국가: 미국을 의미합니다. 이것은 표준 언어 코드입니다. 경로는 다음과 같이 직접 작성할 수 있습니다: www.xxx.com/en-US
하지만 대부분의 경우 국가 수준으로 세분화할 필요는 없고 언어 수준이면 충분합니다. 따라서 다음과 같이 작성하는 것이 가장 적절합니다: www.xxx.com/en
물론 중국어의 경우에는 해당되지 않습니다. 중국어에는 zh-CN(중국어 간체), zh-HK(홍콩 번체), zh-TW(대만 번체)가 포함됩니다.
따라서 중국어의 경우 이것이 유일한 방법입니다: www.xxx.com/zh-cn
4. 부록: 국제 표준 언어 코드
| 언어 코드 | 언어 국가 |
|---|---|
| 아프 | 아프리카 어 |
| af-ZA | 아프리카 어 |
| 아르 | 아라비아 말 |
| AR-AE | 아랍어(UAE) |
| ar-BH | 아랍어(바레인) |
| 아르-DZ | 아랍어(알제리) |
| ar-EG | 아랍어(이집트) |
| AR-IQ | 아랍어(이라크) |
| 아르조 | 아랍어(요르단) |
| ar-KW | 아랍어(쿠웨이트) |
| ar-LB | 아랍어(레바논) |
| ar-LY | 아랍어(리비아) |
| ar-MA | 아랍어(모로코) |
| 아르옴 | 아랍어(오만) |
| 아르-QA | 아랍어(카타르) |
| ar-SA | 아랍어(사우디아라비아) |
| ar-SY | 아랍어(시리아) |
| ar-TN | 아랍어(튀니지) |
| ar-YE | 아랍어(예멘) |
| 아즈 | 아제르바이잔 |
| az-AZ | 아제르바이잔어(라틴어) |
| az-AZ | 아제르바이잔어(키릴 자모) |
| BE | 벨기에 사람 |
| 비바이 | 벨기에 사람 |
| bg | 불가리아 사람 |
| bg-BG | 불가리아 사람 |
| bs-BA | 보스니아어(라틴 문자, 보스니아 헤르체고비나) |
| 캘리포니아 | 카탈로니아 사람 |
| ca-ES | 카탈로니아 사람 |
| CS | 체코 사람 |
| cs-CZ | 체코 사람 |
| 싸이 | 웨일스 말 |
| cy-GB | 웨일스 말 |
| 다 | 덴마크 말 |
| 다DK | 덴마크 말 |
| 드 | 독일 사람 |
| de-AT | 독일어(오스트리아) |
| de-CH | 독일어(스위스) |
| 드-DE | 독일어(독일) |
| 델리 | 독일어(리히텐슈타인) |
| de-LU | 독일어(룩셈부르크) |
| dv | 티비제 |
| dv-MV | 티비제 |
| 엘자 | 그리스 어 |
| 엘-GR | 그리스 어 |
| ko | 영어 |
| ko-AU | 영어(호주) |
| en-BZ | 영어(벨리즈) |
| en-CA | 영어(캐나다) |
| en-CB | 영어(카리브어) |
| en-GB | 영어(영국) |
| en-IE | 영어(아일랜드) |
| ko-JM | 영어(자메이카) |
| en-NZ | 영어(뉴질랜드) |
| ko-PH | 영어(필리핀) |
| ko-TT | 영어(트리니다드) |
| en-US | 영어(미국) |
| en-ZA | 영어(남아프리카 공화국) |
| ko-ZW | 영어(짐바브웨) |
| 어 | 에스페란토 말 |
| 예 | 스페인의 |
| ES-AR | 스페인어(아르헨티나) |
| 에스보 | 스페인어(볼리비아) |
| ES-CL | 스페인어(칠레) |
| 에스-CO | 스페인어(콜롬비아) |
| es-CR | 스페인어(코스타리카) |
| es-DO | 스페인어(도미니카 공화국) |
| ES-EC | 스페인어(에콰도르) |
| es-ES | 스페인어(번체) |
| es-ES | 스페인어(국제) |
| ES-GT | 스페인어(과테말라) |
| es-HN | 스페인어(온두라스) |
| es-MX | 스페인어(멕시코) |
| es-NI | 스페인어(니카라과) |
| es-PA | 스페인어(파나마) |
| ES-PE | 스페인어(페루) |
| ES-PR | 스페인어(푸에르토리코(미국)) |
| es-PY | 스페인어(파라과이) |
| es-SV | 스페인어(엘살바도르) |
| es-UY | 스페인어(우루과이) |
| ES-VE | 스페인어(베네수엘라) |
| 등 | 에스토니아 사람 |
| 에-EE | 에스토니아 사람 |
| 유럽 연합 | 바스크 사람 |
| eu-ES | 바스크 사람 |
| 파 | 프랑스 국민 |
| 전나무 | 프랑스 국민 |
| fi | 핀란드어 |
| fi-FI | 핀란드어 |
| fo | 페로스의 |
| fo-FO | 페로스의 |
| 정말로 | 프랑스 국민 |
| fr-BE | 프랑스어(벨기에) |
| fr-CA | 프랑스어(캐나다) |
| fr-CH | 프랑스어(스위스) |
| 프랑스-프랑스 | 프랑스어(프랑스) |
| fr-LU | 프랑스어(룩셈부르크) |
| fr-MC | 프랑스어(모나코) |
| 글 | 갈리시아어 |
| gl-ES | 갈리시아어 |
| 구 | 구자라트어 |
| 구인 | 구자라트어 |
| 그 | 헤브라이 사람 |
| 헤일 | 헤브라이 사람 |
| 안녕 | 힌디 어 |
| 하이인 | 힌디 어 |
| 시간 | 크로아티아어 |
| 시간-BA | 크로아티아어(보스니아 헤르체고비나) |
| 시간-시간 | 크로아티아어 |
| 후 | 헝가리 인 |
| hu-hu | 헝가리 인 |
| 안녕 | 아르메니아 사람 |
| 하이엠 | 아르메니아 사람 |
| ID | 인도네시아 인 |
| ID-ID | 인도네시아 인 |
| ~이다 | 아이슬란드어 |
| is-IS | 아이슬란드어 |
| 그것 | 이탈리아 사람 |
| 가려움 | 이탈리아어(스위스) |
| 잇-IT | 이탈리아어(이탈리아) |
| 자 | 일본어 |
| ja-JP | 일본어 |
| 카 | 그루지야 사람 |
| 카-GE | 그루지야 사람 |
| ㅋㅋ | 카자흐어 |
| kk-KZ | 카자흐어 |
| kn | 카나라 |
| kn-IN | 카나라 |
| 코 | 한국어 |
| ko-KR | 한국어 |
| 콕 | 콘카니 |
| 꼭인 | 콘카니 |
| 케이 | 키르기스어 |
| ky-KG | 키르기스어(키릴 자모) |
| lt | 리투아니아 사람 |
| lt-LT | 리투아니아 사람 |
| lv | 라트비아 사람 |
| LV-LV | 라트비아 사람 |
| 미 | 마오리족 |
| mi-NZ | 마오리족 |
| MK | 마케도니아 어 |
| mk-MK | 마케도니아어(FYROM) |
| 백만 | 몽고 어 |
| 백만-MN | 몽골어(키릴 문자) |
| ~ 씨 | 마라티어 |
| 미스터인 | 마라티어 |
| ms | 말레이 사람 |
| ms-BN | 말레이어(브루나이 다루살람) |
| ms-내 | 말레이어(말레이시아) |
| 산 | 몰티즈 |
| 산-MT | 몰티즈 |
| 주의 | 노르웨이어(베르케마이어) |
| nb-아니요 | 노르웨이어(베르케마이어)(노르웨이) |
| NL | 네덜란드 사람 |
| nl-BE | 네덜란드어(벨기에) |
| nl-NL | 네덜란드어(네덜란드) |
| n-아니오 | 노르웨이어(Nynosk)(노르웨이) |
| ns | 북부 소토 |
| n-ZA | 북부 소토 |
| 아빠 | 펀자브어 |
| 통증 | 펀자브어 |
| pl | 광택 |
| pl-PL | 광택 |
| 태평양 표준시 | 포르투갈 인 |
| pt-BR | 포르투갈어(브라질) |
| pt-PT | 포르투갈어(포르투갈) |
| 쿠 | 케추아어 |
| qu-BO | 케추아어(볼리비아) |
| qu-EC | 케추아어(에콰도르) |
| qu-PE | 케추아어(페루) |
| 로 | 루마니아 사람 |
| 로로 | 루마니아 사람 |
| 루 | 러시아인 |
| 루루 | 러시아인 |
| 사 | 산스크리트 |
| 사인 | 산스크리트 |
| 그래요 | 북부 사모스 |
| se-FI | 북사모아어(핀란드) |
| se-FI | 스콧 사모스(핀란드) |
| se-FI | 이나리 사모스(핀란드) |
| se-NO | 북사모아어(노르웨이) |
| se-NO | 룰레아 사모스(노르웨이) |
| se-NO | 남부 사모스 (노르웨이) |
| SE-SE | 북부 사미안어(스웨덴) |
| SE-SE | 룰레아 사모스(스웨덴) |
| SE-SE | 사우스사모스(스웨덴) |
| sk | 슬로바키아 사람 |
| sk-SK | 슬로바키아 사람 |
| sl | 슬로베니아 |
| sl-SI | 슬로베니아 |
| 평방 | 알바니아 |
| 제곱-AL | 알바니아 |
| sr-BA | 세르비아어(라틴 문자, 보스니아 헤르체고비나) |
| sr-BA | 세르비아어(키릴 자모, 보스니아 헤르체고비나) |
| sr-SP | 세르비아(라틴어) |
| sr-SP | 세르비아(키릴 문자) |
| 세인트 | 스웨덴어 |
| sv-FI | 스웨덴어(핀란드) |
| sv-SE | 스웨덴어 |
| 남서 | 스와힐리어 |
| sw-KE | 스와힐리어 |
| 시르 | 시리아어 |
| 시르-SY | 시리아어 |
| 고마워 | 타밀 사람 |
| 엷은 주석판 | 타밀 사람 |
| 테 | 텔루구어 |
| 테인 | 텔루구어 |
| 일 | 태국어 |
| 일-TH | 태국어 |
| tl | 타갈로그어 |
| tl-PH | 타갈로그어(필리핀) |
| 테네시 | 츠와나어 |
| tn-ZA | 츠와나어 |
| tr | 터키 사람 |
| tr-TR | 터키 사람 |
| TS | 종가 |
| ㅜㅜ | 타타르어 |
| tt-RU | 타타르어 |
| 영국 | 우크라이나 인 |
| 영국-UA | 우크라이나 인 |
| 당신의 | 우르두어 |
| ur-PK | 우르두어 |
| 우즈 | 우즈벡어 |
| uz-UZ | 우즈벡어(라틴어) |
| uz-UZ | 우즈벡어(키릴 문자) |
| vi | 베트남어 |
| vi-VN | 베트남어 |
| xh | 반투어 |
| xh-ZA | 반투어 |
| zh | 중국인 |
| zh-CN | 중국어 (간체) |
| zh-HK | 중국어(홍콩) |
| zh-MO | 중국어(마카오) |
| zh-SG | 중국어(싱가포르) |
| zh-TW | 중국어 번체) |
| 즈 | 줄루 족 |
| zu-ZA | 줄루 족 |
링크
https://github.com/aigc-projects/nuxt-i18n-starter
