Nuxt.js 如何进行国际化 (i18n)？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Nuxt.js 中进行国际化 (i18n) 可以通过使用 nuxt-i18n 模块来实现。以下是实现国际化的步骤：

安装 nuxt-i18n 模块：
```
npm install nuxt-i18n
```

配置 nuxt-i18n 模块：在 nuxt.config.js 中添加 nuxt-i18n 模块的配置：

// www.javascriptcn.com code example
export default {
  modules: [
    'nuxt-i18n',
  ],
  i18n: {
    locales: [
      {
        code: 'en',
        name: 'English',
      },
      {
        code: 'fr',
        name: 'Français',
      },
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: {
          welcome: 'Welcome',
        },
        fr: {
          welcome: 'Bienvenue',
        },
      },
    },
  },
}

在页面中使用国际化：在页面或组件中使用 $t 方法来获取翻译文本：
```
<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
  </div>
</template>
```
切换语言：可以通过 this.$i18n.setLocale('fr') 来动态切换语言。

本题详细解读

1. 安装 `nuxt-i18n` 模块

nuxt-i18n 是一个专门为 Nuxt.js 设计的国际化模块，它简化了多语言支持的过程。通过 npm 安装该模块后，可以在 Nuxt.js 项目中轻松实现国际化。

2. 配置 `nuxt-i18n` 模块

在 nuxt.config.js 中配置 nuxt-i18n 模块时，需要指定支持的语言（locales）、默认语言（defaultLocale）以及每种语言的翻译文本（messages）。vueI18n 是 nuxt-i18n 的核心配置项，用于定义翻译消息和回退语言。

3. 在页面中使用国际化

在页面或组件中，可以通过 $t 方法来获取当前语言的翻译文本。$t 方法会根据当前语言自动选择合适的翻译文本。

4. 切换语言

通过 this.$i18n.setLocale('fr') 可以动态切换语言。这个方法会更新当前的语言设置，并自动重新渲染页面以显示新的语言内容。

通过以上步骤，你可以在 Nuxt.js 项目中轻松实现国际化支持，使你的应用能够适应不同语言的用户。

Nuxt.js 如何进行国际化 (i18n)？