第一步：向项目添加依赖项

yarn add @nuxtjs/i18n
//--或
npm install @nuxtjs/i18n

第二步：配置语言文件

1.新建 lang 文件夹（名字取自己喜欢的）；
2.配置对应的语言文件

// en-US.js
export default {welcome: 'Welcome'
}
// zh-CN.js
export default {welcome: '欢迎'
}

第三步：plugins下新建i18n.js

import en from '../lang/en-US.js' //英语 - 美国
import fr from '../lang/fr-FR.js' //法语
import ja from '../lang/ja-JA.js' //日语
import es from '../lang/es-ES.js' //西班牙
import de from '../lang/de-DE.js' //德语
import zh from '../lang/zh-CN.js' //中文export default {defaultLocale: 'en',// 根据项目情况，酌情配置locales: [{code: 'en',iso: 'en-US',name: 'English'},{code: 'fr',iso: 'fr-FR',name: 'Français'},{code: 'ja',iso: 'ja-JA',name: 'わぶん'},{code: 'es',iso: 'es-ES',name: 'Español'},{code: 'de',iso: 'de-DE',name: 'Deutsch'},{code: 'zh',iso: 'zh-CN',name: '中文'}],vueI18n: {fallbackLocale: 'en',messages: { de, en, es, fr, ja, zh }}
}

第四步：修改 nuxt.config.js

在nuxt.config.js中 modules 模块下添加 ‘@nuxtjs/i18n’；
引入 import i18n from “./plugins/i18n”

 import i18n from "./plugins/i18n"
//第一种方式 -
{modules: [['@nuxtjs/i18n',]],i18n
}
//第二种方式
{modules: [['@nuxtjs/i18n',i18n]],
}

使用/切换

{{ $t('welcome') }}
//------------
{{ $t('welcome.name1') }}
{{ $t('welcome.name2') }}

<nuxt-link :to="switchLocalePath('fr')">Français</nuxt-link>

最后

以上就是nuxtjs/i18n的简单使用，更复杂的使用和特性请参考官方文档。

Over~

NUXT中使用 nuxtjs/i18n相关推荐

nuxt.js使用@nuxtjs/i18n
第一步安装依赖 npm install @nuxtjs/i18n 第二步在plugins文件夹创建i18n.js文件第三步修改nuxt.config.js 1.引入import i18n fro ...
3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
Linux路由界面设置,nuxt中如何配置页面路由
nuxt中如何配置页面路由发布时间:2020-11-06 15:16:34 来源:亿速云阅读:248 作者:Leah 今天就跟大家聊聊有关nuxt中如何配置页面路由,可能很多人都不太了解,为了让大 ...
Nuxt中如何使用Vuex-Store异步获取数据
Nuxt是一个基于Vue.js的通用型框架,它集成了使用Vue开发的绝大数组件/框架. 长话短说如何在Vuex-store中获取异步数据呢? 在Nuxt中由于集合了Vuex还有其他的一些配置,大大的方 ...
vuex获取php数据,Nuxt中如何使用Vuex-Store异步获取数据
Nuxt持发秀事应差互过来商类如处.,到图近就这是一个基于Vue.js的通用型框架,它集成了使用Vue开发的绝大数组件/框架到二新,为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分 ...
nuxt中图片预加载
使用原理使用动态创建标签的方式提前加载好图片到本地 nuxt中因为是服务器渲染没有new Image() 对象所以加上标签表示客户端渲染 preloadImg() {this.$nextTic ...
记一次在nuxt中使用generate批量生成静态站点页面
做过seo的同学都知道,一些不是实时变化的页面(比如一个星期更新一次内容)我们可以生成静态的站点去让爬虫去爬去,这样就无需一次次地调用接口了. 那么在nuxt中我们怎么去做呢? nuxt为我们提供了一 ...
wxPython中XRC文件i18n示例
wxPython中XRC文件i18n示例 (转载请注明来源于金庆的专栏) 简介 XRC文件是XML格式的界面定义文件, 用于在wxWidgets/wxPython中生成界面. i18n(Interna ...
在nuxt中使用sass
文章目录 1.安装sass 2.使用 2.1全局 2.2页面 2.3设置全局变量(@nuxtjs/style-resources) 1.安装sass 这里sass-loader一定要指定版本,不然就会 ...

NUXT中使用 nuxtjs/i18n

NUXT中使用nuxtjs/i18n

第一步：向项目添加依赖项

第二步：配置语言文件

第三步：plugins下新建i18n.js

第四步：修改 nuxt.config.js

使用/切换

最后

NUXT中使用 nuxtjs/i18n相关推荐

最新文章

热门文章