使用 Nuxt 内置 @nuxtjs/i18n 插件实现Nuxt国际化

1. 安装依赖

使用 Nuxt.js 实现国际化需要安装 @nuxtjs/i18n 插件。可以通过以下命令来安装：

npm install --save @nuxtjs/i18n

2. 配置插件

在根目录下创建一个lang文件夹，并在 nuxt.config.js 文件中添加以下配置：

export default {
  // ...
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [ // 指定支持的语言列表。每个语言都需要指定 code（语言代码）、name（语言名称）、iso（语言代码 + 国家/地区代码）、file（存储语言翻译信息的文件名）等属性。
      {
        code: 'en',
        name: 'English',
        iso: 'en-US',
        file: 'en-US.js'
      },
      {
        code: 'fr',
        name: 'Français',
        iso: 'fr-FR',
        file: 'fr-FR.js'
      }
    ],
    defaultLocale: 'en', // 默认语言
    lazy: true, // 是否使用懒加载，即是否在需要的时候才加载翻译文件
    langDir: '~/lang/', // 存储语言翻译信息的目录
    vueI18n: {
      fallbackLocale: 'en' // 使用 Vue I18n 的配置
    }
  }
}

3. 创建语言文件

在 lang 目录下创建语言文件，文件名与配置中指定的 locales 中的 file 属性相对应，例如：

// lang/en-US.js
export default {
  welcome: 'Welcome to my website!'
}

// lang/fr-FR.js
export default {
  welcome: 'Bienvenue sur mon site web !'
}

4. 在页面中使用翻译

在页面中使用 $t 方法来获取翻译，例如：

<template>
  <div>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

5. 切换语言

a. 在根目录下的store文件夹里创建一个i18n.js文件（使用Vuex），在文件内写入：

export const state = () => ({
	locale: 'en'
})

export const mutations = {
	setLocale(state, locale){
		state.locale = locale
	}
}

b. 在页面上添加一个语言切换按钮：

<template>
  <div>
    <button @click="changeLocale('en')">English</button>
    <button @click="changeLocale('fr')">Français</button>
  </div>
</template>

c. 在页面中添加 changeLocale 方法，调用 $i18n.setLocale 方法来切换语言，例如：

methods: {
  changeLocale(locale) {
    this.$i18n.setLocale(locale)
  }
}

注意！！！ 这样子切换语言会发生路由跳转，比如点击切换法语时，会发生 /fr 的重定向，为了避免路由跳转，只切换语言环境，可以将切换方法改成：

6. 切换语言且不发生路由跳转

a. 在页面上添加一个语言切换按钮：

<template>
  <div>
    <button @click="changeLocale('en')">English</button>
    <button @click="changeLocale('fr')">Français</button>
  </div>
</template>

b. 在页面中添加 changeLocale 方法，调用 $i18n.setLocale 方法来切换语言，例如：

methods: {
  changeLocale(locale) {
    this.$i18n.locale = locale
  }
}

各国语言代码表