当前位置:   article > 正文

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

nuxt3 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
  • 1
  • 2
  • 3

2.配置项

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

首先我们在assets中新建lang文件夹,以中文和英文举例,新建en_us.jszh_cn.js文件
请添加图片描述
文件中的内容是我们定义好的关键词,所有需要切换语言的关键词都放入这两个js文件管理

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

//en
export default {
  welcome: 'hello',
  messages:'world!'
}
//zh
export default {
  welcome: '你好',
  messages:'世界!'
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

然后我们在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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

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

// nuxt.config.js
import i18n from './plugins/i18n'
{
  modules: [
    [
      '@nuxtjs/i18n',
      i18n
    ]
  ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

nuxt3使用插件步骤

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

1.安装依赖

yarn add @nuxtjs/i18n # yarn

npm i @nuxtjs/i18n # npm
  • 1
  • 2
  • 3

2.配置项

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

首先我们在assets中新建lang文件夹,以中文和英文举例,新建en_us.jszh_cn.js文件
在这里插入图片描述

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

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

//en
export default {
  welcome: 'hello',
  messages:'world!'
}
//zh
export default {
  welcome: '你好',
  messages:'世界!'
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

然后我们在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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

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

// nuxt.config.ts
import i18n from './plugins/i18n'
export default defineNuxtConfig({ 
  modules: [
    ['@nuxtjs/i18n',i18n]
  ],
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.在页面中的使用方法

nuxt2不同,nuxt3版本封装了一个hookuseSwitchLocalePath方便我们再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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

4.一些通用的错误提示

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

如果我们定义的关键词文件,key不同时浏览器会发警告
举例:当我们把zh_cn.js中的messages改成了message
请添加图片描述请添加图片描述
浏览器就出现了警告
点击切换后因为’messages’和’message’不同,所以内容没有切换过来使用了回退策略fallbackLocale: 'en',默认使用’messages’英语’world’
中文模式中hello因为key相同已经切换成‘你好’。

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

请添加图片描述

请添加图片描述

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号