nuxt의 다국어 구성 관련 문제

다국어 솔루션

주소창에 여러 언어 버전을 표시하려면 다음 두 가지 옵션이 있습니다.

i18n을 통해

// nuxt.config.js
 i18n: {
 defaultLocale: 'zh', // 기본 언어
 seo: false,
 vueI18n: {
 fallbackLocale: 'zh',
 messages: {
 en: require('./locales/en.json'), // 영어 복제본
 zh: require('./locales/zh.json'), //  
 },
 },
 detectBrowserLanguage: {
 useCookie: true,
 cookieKey: 'i18n_redirected', // 사용자 정의 가능한 쿠키 이름
 alwaysRedirect: true, // 브라우저 언어에 따라 항상 리디렉션하려면 true로 설정하면 됩니다.
 fallbackLocale: 'zh', // 언어가 감지되지 않을 때 대체 언어
 },
 locales: [
 {
 name: 'English',
 code: 'en',
 iso: 'en-US', // 다음은 올바른 ISO 언어 코드입니다.
 file: require('./locales/en.json'),
 },
 {
 name: ' ,
 code: 'zh',
 iso: 'ja-JP', // 이것은 또한 올바른 ISO 언어 코드입니다.
 file: require('./locales/zh.json'),
 },
 ],
 strategy: 'prefix_except_default', // '아니요'로 설정_prefix'는 경로에 언어 마커를 추가하지 않는다는 의미입니다.
 },

다음은 몇 가지 함정입니다. seo를 열면 원하지 않는 도메인 이름 / IP에 hreflang = '/'가 지정된 메타에 있으므로 false로 변경했습니다. 전략 : 세 가지 방법이 있습니다 : prefix_except_default, prefix, no_prefix, prefix_except_default : 주소 표시 줄의 기본값은 언어 버전을 쓰지 않습니다. 다음과 같은 다른 언어로 전환하면 / en 접두사 : 언어 / zh / en으로도 기본값을 나타냅니다. 접두사 : 언어 / zh / en으로도 기본값을 나타냅니다. except_default: 다음과 같이 다른 언어로 전환하는 경우 주소 표시줄의 기본 상황은 언어 버전을 쓰지 않습니다(예: /en 접두사: 기본 상황을 대신하여 /zh /en 언어도 함께 표시).

여러 하위 폴더를 통해 다양한 언어 버전을 관리하세요.

사용자 브라우저의 언어로 웹사이트를 표시하도록 hreflang을 구성합니다.

위에서는 SEO를 false로 설정했습니다.

수동 구성을 수행했습니다.

// nuxt.config.js
 link: [
 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
 ...generateHreflangLinks(),
 ],
function generateHreflangLinks() {
 const baseUrl = 'http://...1'; // 도메인 이름 또는 IP에 맞게 적절히 조정하세요.
 const localeLinks = [
 { lang: 'zh', path: '/' },
 { lang: 'en', path: '/en/' }, // 영어 경로가 다음과 같은 경우
 // 다른 언어로 경로 추가...
 ];
 return localeLinks.map((locale) => ({
 hid: `alternate-hreflang-${locale.lang}`,
 rel: 'alternate',
 href: `${baseUrl}${locale.path}`,
 hreflang: locale.lang,
 }));
}

를 사용하여 언어 버전에 따라 서로 다른 버전을 확인하는 문제를 해결했습니다.

이 웹사이트는 주로 Google SEO를 수행하고 있습니다.

사이트 맵 구성 필요

 @nuxtjs/sitemap
yarn add @nuxtjs/sitemap

// sitemap.config.js
const sitemapEN = {
 path: "/sitemap-en.xml",
 hostname: "http://.com:8121"/en",
 cacheTime: 1000 * 60 * 60 * 24,
 gzip: true,
 generate: false,
 exclude: [],
 defaults: {
 changefred: "always",
 lastmod: new Date(),
 priority: 1,
 },
 };
 
 const sitemapZH = {
 path: "/sitemap-zh.xml",
 hostname: "http://.com:8121"/",
 cacheTime: 1000 * 60 * 60 * 24,
 gzip: true,
 generate: false,
 exclude: [],
 defaults: {
 changefred: "always",
 lastmod: new Date(),
 priority: 1,
 },
 };
 
 export { sitemapEN, sitemapZH };
 

nuxt.config.js의 구성

// nuxt.config.js
import { sitemapEN, sitemapZH } from "./static/sitemap.config";
 modules: [
 // https://..dev/axios
 '@nuxtjs/sitemap',
 '@nuxtjs/axios',
 '@nuxtjs/proxy',
 '@nuxtjs/dayjs',
 'cookie-universal-nuxt',
 'nuxt-i18n',
 ],
 sitemap: [
 // 영어 사이트맵 구성
 {
 ...sitemapEN,
 routes() {
 // 사이트의 영어 버전에 대한 모든 URL 목록을 반환합니다.
 return [ '/',]
 },
 },
 // sitemap 
 {
 ...sitemapZH,
 routes() {
 // 웹사이트의 모든 URL 목록으로 돌아가기
 return [ '/',]
 },
 },
 ],

robots.txt 구성

User-agent: *
Allow: /
Sitemap: http://url주소/사이트맵-.xml
Sitemap: http://url주소/사이트맵-.xml

패키징하면 Google 도구를 통해 검색할 수 있으며 Google에서 색인을 생성합니다.