nuxtjs 国际化i18n

1. 设置国际化匹配文字：

locales/zh.json: (locales/en.json 英文同理)

{"topbar": {"home": "首页","pin": "沸点","topic": "话题","book": "小册","search": "搜索"},"menu": {"home": "我的主页","label": "标签管理","logout": "登出","login": "登录"}
}

2. 设置vue-i18n国际化插件：(用户通过改变locale，使$t(‘topbar.name’)输出不同语言)

plugins/i18n.js:

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)
export default ({ app }) => {app.i18n = new VueI18n({locale: app.$cookies.get('lang') || 'zh',  //通过cookie设置国际化（用户选择一次终身不切换）fallbackLocale: 'zh',   //默认国际化messages: {en: require('~/locales/en.json'),zh: require('~/locales/zh.json')}})
}

3. 国际化保存至vuex:

store/locale.js:

export default {state: () => ({locales: ['zh', 'en'],locale: 'zh'    }),mutations: {SET_LANG(state, locale) {  //用于更改当前国际化if (state.locales.includes(locale)) {state.locale = locale}}}
}

4. 配置路由中间件：

middleware/i18n.js:

export default ({ isHMR, app, store, error }) => {if ( isHMR ) return  //是否是通过模块热替换 webpack hot module replacement (仅在客户端以 dev 模式)const locale = app.$cookies.get('lang') || app.i18n.fallbackLocaleif (!store.state.locale.locales.includes(locale)) {return error({ message: 'This page could not be found.', statusCode: 404 })}store.commit('locale/SET_LANG', locale)app.i18n.locale = locale
}

5. 配置到路由中间件内：

nuxt.config.js:

export default {...router: {  //路由配置middleware: ['i18n']  //路由中间件},plugins: ['~/plugins/i18n.js',  //添加至插件],
}

6.vue使用国际化i18n:

//页面使用：  (若：item.name = 'home'， 则：'<div>首页</div>')
<div>{{ $t('topbar.'+item.name) }}</div>// 切换语言
computed: {...mapState('locale', [ 'locale' ]),
},
methods: {...mapMutations({ 'SET_LANG': 'locale/SET_LANG' }),switchLocale() {let locale = this.locale === 'zh' ? 'en' : 'zh'this.$i18n.locale = localethis.SET_LANG(locale)   //or this.$store.commit('locale/SET_LANG', locale)this.$cookies.set('lang', locale)}
}

nuxtjs 国际化i18n相关推荐

springMVC项目国际化(i18n)实现方法
SpringMVC项目国际化(i18n)实现方法按照作息规律,每周五晚必须是分享知识的时间\(^o^)/~,这周讲点儿啥呢,项目需要逼格,咱们国际化吧(*￣rǒ￣)~,项目中碰到这类需求的童鞋可能并 ...
javaweb学习总结(三十一)——国际化(i18n)
一.国际化开发概述软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
Python中国际化(i18n)完整指南
这是一个完整的指南,展示了如何为一个Python应用程序进行国际化(i18n).当我在handroll项目中添加i18n时,我很难找到支持其他语言的明确建议.这是我个人的一点经验,解释了我是如何做到这 ...
java i18n实例_Java国际化(i18n)格式化日期
本篇文章帮大家学习java国际化(i18n)格式化日期,包含了Java国际化(i18n)格式化日期使用方法.操作技巧.实例演示和注意事项,有一定的学习价值,大家可以用来参考. DateFormat类提 ...
Docker+Nginx部署Angular国际化i18n
Docker+Nginx部署Angular国际化i18n 在Angular项目中添加default.conf文件 default.conf 为了支持局域网,增加一个域名,即本地的局域网ip地址. se ...
spring 国际化-i18n
i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是"国际化"的简称.在资讯领域,国际化(i18n)指让产品(出版物,软 ...
深入分析JavaWeb Item22 -- 国际化(i18n)
一.国际化开发概述软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
项目国际化I18N多语言切换
作为国际化的门户网站,支持多种不同的语言,以方便不同国家,不同语种的用户访问尤其重要,目前通过Vue I18n已实现中英文自由切换. 一.了解I18N 1.什么是I18N i18n(其来源是英文单词 ...
windows下安装python的i18n_python国际化(i18n)和中英文切换
[1.到Flex SDK3.2的bin下运行命令:copylocale en_US zh_HK 2.在flex project下创建一个文件夹locale(与src同目录),在locale下分别创建e ...

nuxtjs 国际化i18n

1. 设置国际化匹配文字：

2. 设置vue-i18n国际化插件：(用户通过改变locale，使$t(‘topbar.name’)输出不同语言)

3. 国际化保存至vuex:

4. 配置路由中间件：

5. 配置到路由中间件内：

6.vue使用国际化i18n:

nuxtjs 国际化i18n相关推荐

最新文章

热门文章