로그인

Nuxt의 궁극적인 국제화 솔루션: I18n+Nuxt Content

작가:네오양 시간:2023/12/06 읽다: 7660
해외 진출이 붐을 이루면서 중국에서 널리 사용되는 Vue와 Nuxt는 국제화 문제에 직면하는 경우가 많습니다. 워드프레스라면 간단하게 설치하세요 […]

해외 진출이 붐을 이루면서 중국에서 널리 사용되는 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-dev

3. 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



copyright © www.lyustu.com 판권 소유.
테마: TheMoon V3.0.저자:neo yang