Nuxt.js国际化的前提是,已经使用脚手架工具搭建好了Nuxt.js的开发环境。

我使用的环境是nuxt@2.3 + vuetify@1.4 + vue-i18n@7.3

1. 先安装vue-i18n

npm install --save vue-i18n

2. 更新store文件

在@/store/index.js文件中,修改添加如下代码:

export const state = () => ({
locales: ['en-US', 'zh-CN'],
locale: 'en-US'
}) export const mutations = {
SET_LANG(state, locale) {
if (state.locales.indexOf(locale) !== -1) {
state.locale = locale
}
}
}

注意,是mutations对象下的SET_LANG函数

3. 更新plugins文件

在此目录下,添加文件:i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n' Vue.use(VueI18n) export default ({ app, store }) => {
// Set i18n instance on app
// This way we can use it in middleware and pages asyncData/fetch
app.i18n = new VueI18n({
locale: store.state.locale,
fallbackLocale: 'en-US',
messages: {
'en-US': require('@/locales/en-US.json'),
'zh-CN': require('@/locales/zh-CN.json')
}
}) app.i18n.path = (link) => {
// 如果是默认语言,就省略
if (app.i18n.locale === app.i18n.fallbackLocale) {
return `/${link}`
}
return `/${app.i18n.locale}/${link}`
}
}

messages对象的key要和state.locales中的相同

4. 更新middleware文件

在此目录下,添加文件: i18n.js

export default function({ isHMR, app, store, route, params, error, redirect }) {
const defaultLocale = app.i18n.fallbackLocale
// If middleware is called from hot module replacement, ignore it
if (isHMR) return
// Get locale from params
const locale = params.lang || defaultLocale
if (store.state.locales.indexOf(locale) === -1) {
return error({ message: 'This page could not be found.', statusCode: 404 })
}
// Set locale
store.commit('SET_LANG', locale)
app.i18n.locale = store.state.locale
// If route is /<defaultLocale>/... -> redirect to /...
if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
const re = new RegExp(toReplace)
return redirect(
route.fullPath.replace(re, '/')
)
}
}

5. 增加locales文件夹

增加对应语言的对照json数据,en-US.json、zh-CN.json等等

其中,两个json数据,需要相同的key,才能翻译成功。

{
"links": {
"home": "Home",
"about": "About",
"english": "English version",
"chinese": "简体中文"
},
"home": {
"title": "Welcome",
"introduction": "This is an introduction in English."
},
"about": {
"title": "About",
"introduction": "This page is made to give you more informations."
}
}

6. 修改nuxt.config.js文件

修改或者增加如下对象:

  router: {
middleware: 'i18n'
},
plugins: ['@/plugins/i18n.js'],
generate: {
routes: ['/', '/about', '/zh-CN', '/zh-CN/about']
}

7. 修改pages文件夹下相应的页面

在pages文件夹下新建_lang文件夹,之后在此文件夹下新建对应的页面组件。

例如:

@/pages/_lang/index.vue

@/pages/_lang/about.vue

一定要带下划线的_lang,否则params.lang,获取不到值。可以参考官网这里

<template >
<div> {{ $t('home.title') }}</div>
</template>

页面中的需要翻译的内容,都使用语法$t('')给包裹起来,其中里面的值,是从@/locales/***.json文件中获取对应的key

8. 总结

经过以上7个步骤之后,国际化基本可以完成了。完成国际化的过程中,提到了三个需求

  1. 切换语言,不刷新页面。【只需要在切换的时候,设置store中的locale值为对应的language值,不做其他操作】
  2. 刷新页面之后,还是当前语言。【这个需要将设置好的语言保存起来,放到本地缓存中,是个不错的选择】
  3. 根据浏览器的语言,显示语言。【使用navigator.language来获取浏览器默认语言,之后将其赋值给为store中的locale值】

2、3的优先级,首次进来,根据浏览器系统语言决定,刷新的时候,根据缓存决定。最后都需要给store中的locale赋值。显示何种语言,是由$i18n.locale决定。

参考案例

  1. nuxt官网示例

Nuxt.js国际化vue-i18n的搭配使用的更多相关文章

  1. nuxt.js部署vue应用到服务端过程

    由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染 移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成.现在记录一下部署中的过程. 注:部署时候过 ...

  2. Nuxt.js 学习笔记

    起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成 ...

  3. Nuxt.js学习心得

    一.官网 Nuxt.js - Universal Vue.js Applications https://nuxtjs.org/ 二.中文官网 Nuxt.js - Vue.js 通用应用框架 http ...

  4. vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  5. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  6. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

  7. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  8. vue.js 服务端渲染nuxt.js反向代理nginx部署

    vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之 ...

  9. [Vue] Create Vue.js Layout and Navigation with Nuxt.js

    Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template ...

随机推荐

  1. 关于使用stanfordcorenlp一直运行不报错的解决方法

    一.问题描述: 最近在使用stanfordcorenlp时,遇到了我在运行时代码不报错但同时也没有结果的问题,等了很久也没有出结果.其实是很简单的一个步骤,但却花了好几天的时间都没有成功!网上更多的是 ...

  2. 七.django模型系统(一)

    Ⅰ.django的ORM 1.含义 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语 ...

  3. Linux基础整理

    命令 说明 chsh 查看和修改当前登录的Shell export 查看和设置Shell环境变量 read 读取从键盘或文件输入的数据 expr 四则远算和字符串运算 tmux 一个窗口操作多个会话 ...

  4. 2018-2019-2 网络对抗技术 20165232 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165232 Exp3 免杀原理与实践 免杀原理及基础问题回答 一.免杀原理 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. ...

  5. Python 中使用 matplotlib 绘图中文字符显示异常的问题

    最近在使用 Python matplotlib 绘制图表时发现中文字符不能正确显示:比如在绘制折线图时,中文全部显示成▢▢▢的格式,虽然将数据改成英文就没什么问题,但是所有数据都这么做时不可行的,于是 ...

  6. 使用Docker安装ELK系列(超简单)

    root权限 docker版本:1.13.1 ELK版本:6.4.3 项目中均关闭X-Pack 一.安装Elasticsearch 新建elasticsearch目录,并再其下新建文件config/e ...

  7. H5_0002:微信分享设置

    1,非公众号的链接,设置分享的预览图片. 先打开页面,在收藏页面,最后在收藏界面长按 “转发” ,即可在链接上出现预览图片.

  8. C++与蓝图互调

    Kismet库 蓝图方法cpp使用 例:打LOG:Print String 蓝图节点的鼠标tips:Target is Kismet System Library #include "Run ...

  9. SpringMVC+Apache Shiro+JPA(hibernate)整合配置

    序: 关于标题: 说是教学,实在愧不敢当,但苦与本人文笔有限,实在找不到更合理,谦逊的词语表达,只能先这样定义了. 其实最真实的想法,只是希望这个关键词能让更多的人浏览到这篇文章,也算是对于自己写文章 ...

  10. Jquery验证码倒计时

    html代码: <input type="button" value="获取验证码" id="getCode" style=" ...