【nuxt2/nuxt3】@nuxtjs/i18n国际化

前言

在网上阅读的大部分nuxt国际化案例都还在使用vue-i18n插件做教程，实际上nuxt本身就已经基于vue-i18n封装了@nuxtjs/i18n插件。而且它比vue-i18n封装了更多好用的功能，具体的使用方法我们可以查看 官方文档

但是nuxtjs/i18n官方好像没有做中文翻译，所以我在这里出了一篇中文教程。
第一这个插件比vue-i18n用起来更方便，第二没有太多的中文教程，第三把nuxt2和nuxt3的使用教程都做了进去。

• 与vue-i18n集成
• 自动生成路由和自定义路径
• 搜索引擎优化
• 延迟加载翻译消息
• 基于自动检测语言的重定向
• 不同语言的域名不同
• 使用Vuex存储当前地区和消息

本文相关文献：
https://i18n.nuxtjs.org/setup
https://github.com/nuxt-modules/i18n/tree/main

我自己搭建的nuxt3一键启动包地址 ： 点击这里
包含的库： i18n国际化/environment区分环境/axios请求工具/element-plus组件库/pinia状态管理/pinia-plugin-persistedstate状态持久化/tailwindcss原子化风格库

使用@nuxtjs/i18n插件步骤

nuxt2使用插件步骤

注意以下内容的教程版本是nuxt2！！！！！
nuxt3在下一节

1.安装依赖

yarn add @nuxtjs/i18n # yarn

npm i @nuxtjs/i18n # npm

2.配置项

github上给的案例非常简单，但是不便于维护，所以我们简单的封装下，拆分出语言配置部分方便我们后期增加、删除、编辑单词等维护操作

首先我们在assets中新建lang文件夹，以中文和英文举例，新建en_us.js和zh_cn.js文件

文件中的内容是我们定义好的关键词，所有需要切换语言的关键词都放入这两个js文件管理

注意：两个文件内的key一定要对应起来，否则，就会使用默认语言的key，如果默认语言的key也没有就显示成$t内的字符名称

//en
export default {
  welcome: 'hello',
  messages:'world!'
}
//zh
export default {
  welcome: '你好',
  messages:'世界!'
}

然后我们在plugins目录下新建一个i18n的js文件
``
引入定义好的语言关键词文件

import en_us from '../assets/lang/en_us.js'
import zh_cn from '../assets/lang/zh_cn.js'


const i18n = {
  locales: ['en', 'zh'],//有多少地区的语言就添加多少种
  defaultLocale: 'en',//默认的地区语言
  vueI18n: {
    fallbackLocale: 'en',//回退策略，指定的locale中没有找到对应资源的情况下使用的locale
    messages: { //要渲染的信息，有多少语言就添加多少种
      en: en_us,
      zh: zh_cn
    }
  }

}

export default i18n

最后我们要把配置项引入并放到nuxt.config.js中

// nuxt.config.js
import i18n from './plugins/i18n'
{
  modules: [
    [
      '@nuxtjs/i18n',
      i18n
    ]
  ]
}

3.使用方法

• 在页面展示使用：$t("welcome")
• 切换语种使用： <nuxt-link :to="switchLocalePath('en')">en</nuxt-link>
• 特殊的路由导航方式：<NuxtLink :to="localePath('/test')">跳转</NuxtLink>
• 获得实例方法: this.$i18n

注意：由于切换语言后url会改变，但是NuxtLink导航标签跳转时无法自动识别用户切换的语言，所以nuxt/i18n提供了localePath方法帮助我们导航时识别当前用户选择的语言。

完整示例：

<template>
  <div>
    {{ $t("welcome") }}
    {{ $t("messages") }}
    <hr>
    切换语言：
    <nuxt-link :to="switchLocalePath('en')">en</nuxt-link>
    <br>
    <nuxt-link :to="switchLocalePath('zh')">zh</nuxt-link>
    路由跳转(前提是配置好test路由)：
     <NuxtLink :to="localePath('/test')">跳转</NuxtLink>
    <br>
    <button @click="getI18n">获取到i18n实例</button>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  components: {},
  data() {
    return {};
  },
  methods: {
    getI18n() {
      console.log(this.$i18n);
    }
  },
  mounted() {},
  asyncData() {},
};
</script>

nuxt3使用插件步骤

注意本文的教程版本是nuxt3！！！！！

1.安装依赖

yarn add @nuxtjs/i18n # yarn

npm i @nuxtjs/i18n # npm

2.配置项

github上给的案例非常简单，但是不便于维护，所以我们简单的封装下，拆分出语言配置部分方便我们后期增加、删除、编辑单词等维护操作

首先我们在assets中新建lang文件夹，以中文和英文举例，新建en_us.js和zh_cn.js文件

文件中的内容是我们定义好的关键词，所有需要切换语言的关键词都放入这两个js文件管理

注意：两个文件内的key一定要对应起来，否则，就会使用默认语言的key，如果默认语言的key也没有就显示成$t内的字符名称

//en
export default {
  welcome: 'hello',
  messages:'world!'
}
//zh
export default {
  welcome: '你好',
  messages:'世界!'
}

然后我们在plugins目录下新建一个i18n的ts文件

引入定义好的语言关键词文件

import en_us from '../assets/lang/en_us.ts'
import zh_cn from '../assets/lang/zh_cn.ts'


const i18n = {
  locales: ['en', 'zh'],//有多少地区的语言就添加多少种
  defaultLocale: 'en',//默认的地区语言
  vueI18n: {
    fallbackLocale: 'en',//回退策略，指定的locale中没有找到对应资源的情况下使用的locale
    messages: { //要渲染的信息，有多少语言就添加多少种
      en: en_us,
      zh: zh_cn
    }
  }

}

export default i18n

最后我们要把配置项引入并放到nuxt.config.ts中

// nuxt.config.ts
import i18n from './plugins/i18n'
export default defineNuxtConfig({ 
  modules: [
    ['@nuxtjs/i18n',i18n]
  ],
})

3.在页面中的使用方法

和nuxt2不同，nuxt3版本封装了一个hook：useSwitchLocalePath方便我们再setup语法糖中使用nuxt-link标签切换语言

• 在页面展示使用：$t("welcome")
• 切换语种使用： <NuxtLink :to="switchLocalePath('en')">en</NuxtLink> + useSwitchLocalePath()
• 特殊的路由导航方式：<NuxtLink :to="localePath('/test')">跳转</NuxtLink>
• 获得实例方法: useI18n()

完整示例：

<template>
  <div class="app">
    <div class="title">
      {{ $t("welcome") }}
      {{ $t("messages") }}
    </div>

    <div>
    切换语言：
      <NuxtLink :to="switchLocalePath('en')">en</NuxtLink>
      <NuxtLink :to="switchLocalePath('zh')">zh</NuxtLink>
    路由跳转(前提是配置好test路由)：
     <NuxtLink :to="localePath('/test')">跳转</NuxtLink>
      <button @click="getI18n">获取到i18n实例</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "#imports"

const switchLocalePath = useSwitchLocalePath()
const localePath = useLocalePath();
const i18n = useI18n();

const getI18n = () => {
  console.log(i18n);
};
</script>

4.一些通用的错误提示

！！！注意：一定要仔细的确认中英文内的关键词key相同
否则会触发fallbackLocale: 'en'回退策略，指定的locale中没有找到对应资源的情况下使用的locale
如果还没找到就只返回$t内的字符

如果我们定义的关键词文件，key不同时浏览器会发警告
举例：当我们把zh_cn.js中的messages改成了message

浏览器就出现了警告
点击切换后因为’messages’和’message’不同，所以内容没有切换过来使用了回退策略fallbackLocale: 'en'，默认使用’messages’英语’world’
中文模式中hello因为key相同已经切换成‘你好’。

所以一定要把所有语言的key都统一才行！！！