你永远需要的关于 I18n 的唯一 Nuxt.js 教程

ToolkitUse
4,971 阅读11分钟

搜索引擎优化 (SEO) 是有机地吸引更多人并征服新市场的好方法。Nuxt 是一种流行的 JavaScript 框架，可以显着帮助您的应用程序在 Google 上获得更好的排名。本教程将引导您从头到尾完成 Nuxt.js 的国际化过程。

搜索引擎优化 (SEO) 是强大的全球增长战略 的核心要素。为了能够在全球范围内运行您的应用程序，您需要从一开始就消除这个障碍。

Nuxt 是一种流行的 JavaScript 框架，可以显着帮助您的应用程序使用 SEO 获得更好的 Google 排名。它基于 Vue.js，同时支持单页应用程序 (SPA) 和服务器端渲染 (SSR) 格式。

由于它支持预渲染和开箱即用的 Vue-meta，它已成为所有需要更好 SEO 但仍使用非常棒的 Vue.js 语法和库的应用程序的首选框架。

在这个端到端的 Nuxt.js 教程中，我们将向您展示如何将您的 Nuxt.js 应用程序国际化并使其适合全球市场。出发吧！

开始使用我们的 Nuxt.js 教程

对于本教程，我们需要以下库：

  1. create-nuxt-app – 搭建我们的 Nuxt 应用程序

  2. nuxt-i18n – 本地化我们的应用程序

Nuxt 提供了一种简单的方法，可以通过create-nuxt-app 实用程序使用各种选项来搭建基本结构。不必先安装此实用程序，我们可以npx 直接使用和使用它。

让我们使用以下命令创建一个 Nuxt.js 应用程序：

npx create-nuxt-app nuxt-intl

您可以为_项目名称、项目描述_和_作者姓名_添加您选择的任何条目_。_ 我们可以在npm和之间进行选择yarn。简单地选择你觉得最舒服的那个。始终用于ESLint检测语法错误是一种很好的做法。我更喜欢使用，Prettier 因为它使我的代码看起来格式正确，并且当多个开发人员处理相同的代码时，它会强制他们使用特定的格式，以便代码保持统一。

我的设置如下：安装完成后，导航到项目目录并运行应用程序：

cd nuxt-intl 
npm run dev

在浏览器中打开http://localhost:3000/，您将看到默认的应用程序页面。

本地化基础

在本教程中，我们将使用一个名为 的库nuxt-i18n，基于vue-i18n，以及一些特定于Nuxt 的本地化选项。在安装nuxt-i18n 软件包之前 ，让我们先了解一下本地化的基础知识，看看这个库中提供的各种选项。

我们为每种语言定义键值对，其中所有语言的键保持相同，值是该语言的翻译。

// English
{
  "hello": "Hello"
}
// French
{
  "hello": "Bonjour"
}

我们有两种翻译选项。

  1. Vue 组件内部
  2. 外部 JSON 或 Js 文件。

Vue 组件内的翻译

您还可以选择直接从.vue文件中添加翻译 。这些翻译主要用于特定于组件的语言环境，这对于较小的应用程序完全没问题。但是，随着您的应用程序随着时间的推移而增长，维护起来将变得非常困难。组件大小的增长将导致到处都是重复的翻译。同样重要的是，你很可能会让翻译人员负责字符串翻译——他们很可能不了解 Vue 组件——在 Vue 组件内部进行翻译并不理想。

<i18n> 
{   
  "en": {     
    "hello": "hello!"   
  },   
  "fr": {     
    "hello": "Bonjour！"   
   } 
} 
</i18n> 
<template>
</template>

外部 JSON 或 JS 文件

我们可以为每种语言设置单独的文件。它更像是一个键值对文件。每种语言都有对应于特定翻译的相同密钥。这是最常用的推荐方法，易于维护。这不仅可以防止重复，因为我们可以参考以前的翻译，还可以根据功能等进行适当的 JSON 分组。

//en.json 
{   
  "message": "Hello", 
  "login": {
    "username": "User Name",
    "password": "Password"
  }
}

安装包

让我们安装nuxt-i18n和配置它。

npm i nuxt-i18n

由于 Nuxt 没有 CLI 来自动生成类似vue-cli for的配置vue-i18n，我们必须添加以下配置来设置插件。

让我们在config 文件中创建一个文件夹和我们的配置 i18n.js 。

import en from '../locales/en.json'
import fr from '../locales/fr.json'
export default {
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, fr }
}

在此配置中，我们使用外部文件来存储我们的翻译文本。例如，让我们使用英语和法语。我们都可以将默认和后备语言环境传递给插件。在下一步中，我们创建这两个外部文件来存储我们的翻译。

locales 在根文件夹中创建一个目录和两个文件， en.json 和fr.json，其中将包含我们所有的翻译。

locales/en.json
{
 "message": "Hello!"
}
locales/fr.json

{
 "message": "Bonjour"
}

最后，让我们将这个库添加到我们的nuxt.config.js文件中，以便 Nuxt 知道它。现在我们可以在我们的应用程序中使用它。

nuxt.config.js
import i18n from './config/i18n'
 
buildModules: [
 /* other modules */
 [
  'nuxt-i18n',
  {
    vueI18nLoader: true,
    defaultLocale: 'fr',
     locales: [
      {
         code: 'en',
         name: 'English'
      },
      {
         code: 'fr',
         name: 'Français'
      }
    ],
    vueI18n: i18n
  }
 ]
]

vueI18nLoader 是可选的。这将使我们能够在 Vue 组件中编写翻译。 让我们检查包是否正常运行：打开pages/index.vue， 并更新标题，如下所示：

pages/index.vue
<template>
  <div class="container">
      <h1 class="title">{{ $t('message') }}</h1>
      <!-- some code -->
  </div>
</template>

在这里， $t() 告诉我们的 Nuxt 应用程序使用key 基于所选语言的翻译版本。 再次运行应用程序，您可以在屏幕上看到我们的英文信息！

让我们来手动更新defaultLocale 在我们的文件：nuxt.config.jsfr

nuxt.config.js
[  'nuxt-i18n',  {    defaultLocale: 'fr',     locales: [      {         code: 'en',         name: 'English'      },      {         code: 'fr',         name: 'Français'      }    ],
    vueI18n: i18n
  }
]

我们的设置差不多完成了。由于我们手动更新代码， 因此 每次更改语言环境都变得乏味。让我们创建一个下拉菜单来选择语言。

components/LanguageInput.vue 使用以下代码创建一个组件：

components/LanguageInput.vue
<template>
  <div class="lang-dropdown">
    <select v-model="$i18n.locale">
      <option
        v-for="lang in $i18n.locales"
        :key="lang.code"
        :value="lang.code"
        >{{ lang.name }}</option
      >
    </select>
  </div>
</template>
<script>
export default {}
</script>

让我们将此组件添加到我们的文件中。现在我们可以轻松地在语言之间切换。太棒了！让我们深入研究图书馆提供的不同本地化技术方法，并查看每种方法的示例。pages/Index.html

命名格式

在某些情况下，并非每个单词都需要翻译，例如专有名词（名字或姓氏、地名）、URL 等。为了避免在每个语言环境文件中都复制它们，我们可以应用名称格式技术。

locales/en.json
{
  "copyrightMessage": "Copyright: All Rights Reserved { name }"
}

我们可以在我们的组件中使用它，如下所示：

 <p>{{ $t('copyrightMessage', { name: 'Phrase.com' }) }}</p>

如果我们有多个不需要翻译的文本片段，我们也可以使用列表方法。

 locales/en.json
{
  "welcomeMessage": "Welcome! {0}, Your Email: {1} has been verified successfully"
}

<p>{{ $t('copyrightMessage', ['Preetish HS', 'contact@preetish.in']) }}</p>

由于每种语言都有自己特定的结构，这种技术使翻译人员可以灵活地将任何值放在句子中的任何位置。

多元化

如果没有实际数据，通常很难预测数量。例如，当您无法预测项目数量时，您会看到文本片段，例如 style(s) 或category(s)。这或多或少会起作用，但我们可以利用库的功能并应用适当的复数形式。为此，我们可以传递数量值，包裹将发送相应的翻译。

locales/en.json
{
  "style": "Style | Styles"
}

我们需要使用$tc() (Translation Count) 而不是 plain$t()：

<p>{{ $tc('style', 1) }}</p>
<p>{{ $tc('style', 2) }}</p>
// output 
Style
Styles

我们的可数翻译现在看起来好多了！

如果您需要执行更复杂的计数，该库也可以为您提供帮助（在下面的示例中查看它的实际操作）。我们还可以为具有不同复数规则的语言定制 复数规则。

locales/en.json
{
  "apple": "no apples | one apple | {count} apples",
  "banana": "no bananas | {n} banana | {n} bananas"
}
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
<p>{{ $tc('apple', 10) }}</p>
<p>{{ $tc('apple') }}</p>
<p>{{ $tc('apple', 0) }}</p>
 
<p>{{ $tc('banana') }}</p>
<p>{{ $tc('banana', 0) }}</p>
<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
<p>{{ $tc('banana', 1) }}</p>
<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>
//output
10 apples
10 apples
one apple
no apples
 
1 banana
no bananas
1 banana
1 banana
too many bananas

号码本地化

不同的语言和地区以不同的方式表示数字（货币金额、日期、时间等）。有些使用逗号分隔的数字，有些使用空格分隔的数字。货币符号也可以带有前缀或后缀。因此，如果您想拥有完美的用户体验、获取和留住用户，那么正确显示数字是必不可少的。

为了实现数字格式，让我们创建一个名为的新目录formats 并添加一个文件numberFormats.js. 在这里我们可以定义我们所有的数字格式。

formats/numberFormats.js
export const numberFormats = {
  en: {
    currency: {
      style: 'currency',
      currency: 'USD'
    }
  },
  'en-IN': {
    currency: {
      style: 'currency',
      currency: 'INR'
    }
  },
  fr: {
    currency: {
      style: 'currency',
      currency: 'EUR'
    }
  }
}

在这里，基于Intl.NumberFormat ，库会自动为我们获取货币格式和符号。 现在我们需要让我们的库知道我们需要使用这些格式。让我们将此文件添加到我们的设置方法中。

config/i18n.js
import { numberFormats } from '../formats/numberFormats'
import en from '../locales/en.json'
import fr from '../locales/fr.json'
export default {
  defaultLocale: 'en',
  fallbackLocale: 'en',
  numberFormats,
  messages: { en, fr }
}

我们现在可以在我们的组件中使用这些。这里我们使用的$n() 格式会让库知道我们正在尝试访问数字格式。我们可以显式地将 传递locale 给方法，如下所示。如果我们不通过，它将采用当前选择的语言。该语言的数字格式必须在numberFormats.js 文件中定义， 以便它可以工作。

< p > {{ $n(1000000, 'currency') }} </ p > 
< p > {{ $n(7000000, 'currency', 'en-IN') }} </ p > 
< p > {{ $n(7000000, 'currency', 'fr') }} </ p >

通过符号和正确的格式、美元 (USD) 的国际数字系统和卢比 (INR) 的印度数字系统，货币看起来要好得多。

日期和时间本地化

与数字本地化类似，日期和时间格式因语言和地区而异。我们遵循相同的过程并创建另一个文件，dateTimeFormats.js 用于定义不同语言的日期和时间格式。

应用程序的不同部分使用了多种日期格式。我们可以为这些用例给出特定的名称，例如short, long,reportDateFormat

例如：

  1. 上次登录时间格式： Sat, 20 Jun, 2020, 9:55 pm
  2. 交易日期格式： Jun 27, 2020

下表显示了我们可以在日期时间输入中拥有的属性。相应的值显示了该属性的显示方式。

locales/dateTimeFormats.js
export const dateTimeFormats = {
  en: {
    short1: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    },
    long: {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      weekday: 'short',
      hour: 'numeric',
      minute: 'numeric'
    }
  },
  'en-IN': {
    short1: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    },
    long: {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      weekday: 'short',
      hour: 'numeric',
      minute: 'numeric',
      hour12: true
    }
  }
}

为了在我们的应用程序中使用这些格式，我们使用$d() 符号。就像数字格式一样，如果我们不明确传递locale，将使用当前选择的语言环境。如果后者没有定义格式，则将使用后备语言格式。因此，请确保为支持的语言环境定义了格式。

<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $d(new Date(), 'long', 'en-IN') }}</p>

//output
Jun 12, 2020
Mon, 12 Jun, 2020, 11:45 am

就像我们的数字格式一样，图书馆将根据国际标准自动格式化日期和时间。

Nuxt 特定的本地化

nuxt-i18n 与常规使用相比，使用vue-i18n 它的优势在于它提供了本地化路线的附加选项，以及许多与 SEO 相关的好处。

本地化路线

仅仅通过查看我们的 URL，我们不会知道应用程序当前使用的是哪种语言。我们依赖本地存储或 cookie 来保存我们的区域设置首选项。

为了更好地理解这一点，我们需要再创建两个页面， About.vue 然后Contact.vue将这些页面的链接添加到我们的index.vue 页面中。

<template>
  <div>
    <nuxt-link to="/about">{{ $t('about') }}</nuxt-link>
    <nuxt-link to="/contact">{{ $t('contact') }}</nuxt-link>
  </div>
</template>

现在，如果我们导航到该 about 页面，无论语言选择如何，它都会打开localhost:3000/about。在我们的 URL ( localhost:3000/fr/about)上添加语言环境前缀会好得多。为了实现这一点，有两种策略：

  • 无默认前缀：我们的默认语言 ,en不会被前缀，而其他语言，例如法语，关于页面将具有 URL：localhost:3000/fr/
  • 前缀：使用此策略，包括我们的默认语言在内的所有语言都将带有前缀。
  • 前缀和默认：此策略结合了前两种策略。即默认语言将同时具有前缀和非前缀版本。

默认情况下， nuxt-i18n 已经为我们创建了前缀路由。没有任何额外的代码，它将应用第三种策略。

//routes generated
[
 {
    path: "/",
    component: _3237362a,
    name: "index___en"
  },
  {
    path: "/fr/",
    component: _3237362a,
    name: "index___fr"
  },
  {
    path: "/about",
    component: _71a6ebb4,
    name: "about___en"
  },
  {
    path: "/fr/about",
    component: _71a6ebb4,
    name: "about___fr"
  },
 {
    path: "/contact",
    component: _71a6ebb4,
    name: "about___en"
  },
  {
    path: "/fr/contact",
    component: _71a6ebb4,
    name: "about___fr"
  }
]

如果我们导航到localhost:3000/fr/about，它会自动在我们的about 页面上加载法语翻译 。但是，如果我们浏览<nuxt-links>.为了完成这项工作，我们传递了一个localePath() 具有相关页面名称的函数。localePath()由nuxt-i18n 库提供，它返回传入的route.

< nuxt-link :to= "localePath('about')" >{{ $ t ( 'about' ) }}< /nuxt-link > 
< nuxt-link :to= "localePath('contact')" >{{ $ t ( 'contact' ) }}< /nuxt-link >

默认翻译将按原样工作，当您将翻译更改为法语，然后单击关于它现在将打开localhost:3000/fr/about。该 about 页面

如果选择默认语言，路由路径将保持不变。单击 about 将打开到localhost:3000/about。如果您现在将翻译更改为法语，然后单击 about，它将打开为localhost:3000/fr/about.

要为我们的默认语言使用前缀“lang”，我们需要将一个strategy 属性传递给我们的 Nuxt 配置。

nuxt.config.js
// nuxt.config.js
['nuxt-i18n', {
  strategy: 'prefix'
}]

现在加载localhost:3000，它会自动重定向到localhost:3000/en. 如果要删除默认语言的前缀 URL，请将策略设置为prefix_except_default。这将使 URL 失效，例如localhost:3000/en。

搜索引擎优化 (SEO)

如果在初始化期间将该seo 属性设置为true，则库会执行各种 SEO 改进。我们还需要传递ISO 每个语言环境，库使用它来执行这些优化：

  1. 更新lang HTML 标签中的属性
  2. hreflang 锚标签的生成 <a href="" hreflang="<selected-locale-iso>">
  3. 打开图形语言环境标签，例如og:locale 和 og:locale:alternate

让我们更新我们的插件初始化以自动为我们进行这些优化。这将结束我们的 Nuxt.js 教程。

nuxt.config.js
[
   'nuxt-i18n',
   {
     strategy: 'prefix',
     defaultLocale: 'en',
     seo: true,
     locales: [
       {
         code: 'en',
         name: 'English',
         iso: 'en-US'
       },
       {
         code: 'fr',
         name: 'Français',
         iso: 'fr-FR'
       }
     ],
     vueI18n: i18n
   }
 ]

结论
国际化 nuxt-i18n 将使您的 Nuxt 应用程序在世界的任何角落都可以访问。我真诚地希望这个 Nuxt.js 教程可以帮助你正确地开始。要了解更多本地化 Vue/Nuxt 应用程序的技术，请访问官方 vue-i18n 文档 和nuxt-i18n 文档 。如果您已经有信心并想开始国际化，请确保您免费试用 Phrase 。凭借其强大的 API 和强大的工具包，它将从一开始就自动化您的 i18n 和 l10n 流程！

来源链接：zhuanlan.zhihu.com/p/402294002

avatar
文章
阅读
粉丝