赞
踩
在网上阅读的大部分nuxt国际化案例都还在使用vue-i18n
插件做教程,实际上nuxt
本身就已经基于vue-i18n
封装了@nuxtjs/i18n
插件。而且它比vue-i18n
封装了更多好用的功能,具体的使用方法我们可以查看官方文档
但是nuxtjs/i18n
官方好像没有做中文翻译,所以我在这里出了一篇中文教程。
第一这个插件比vue-i18n用起来更方便,第二没有太多的中文教程,第三把nuxt2和nuxt3的使用教程都做了进去。
本文相关文献:
https://i18n.nuxtjs.org/setup
https://github.com/nuxt-modules/i18n/tree/main
我自己搭建的nuxt3一键启动包地址 : 点击这里
包含的库: i18n国际化/environment区分环境/axios请求工具/element-plus组件库/pinia状态管理/pinia-plugin-persistedstate状态持久化/tailwindcss原子化风格库
注意以下内容的教程版本是nuxt2!!!!!
nuxt3在下一节
yarn add @nuxtjs/i18n # yarn
npm i @nuxtjs/i18n # npm
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
]
]
}
$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!!!!!
yarn add @nuxtjs/i18n # yarn
npm i @nuxtjs/i18n # npm
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]
],
})
和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>
!!!注意:一定要仔细的确认中英文内的关键词key相同
否则会触发fallbackLocale: 'en'
回退策略,指定的locale中没有找到对应资源的情况下使用的locale
如果还没找到就只返回$t
内的字符
如果我们定义的关键词文件,key不同时浏览器会发警告
举例:当我们把zh_cn.js
中的messages
改成了message
浏览器就出现了警告
点击切换后因为’messages’和’message’不同,所以内容没有切换过来使用了回退策略fallbackLocale: 'en'
,默认使用’messages’英语’world’
中文模式中hello因为key相同已经切换成‘你好’。
所以一定要把所有语言的key
都统一才行!!!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。