1、国际化介绍

对于一些跨国项目来说，国际化是尤为重要的，那么什么要国际化呢?国际化的意思就是将我们写的项目，能够根据不同国家的语言，进行翻译，进行切换，方便不同国家的客户使用

基本思路如下

① 定义语言包：需要几种语言展示，就定义几个语言包

② 创建对象，对语言包进行整合，对象的 key 为语言包的引用，值为语言包对象

③ 创建 vue-i18n 类的对象，同时为其 messages 属性为第②步创建的对象，为其 locale 属性赋值为第②步中语言对象对应的 key

④ 在创建 Vue 实例对象时，挂载 vue-i18n 类的对象

下面具体讲解

2、简单使用

1、安装插件 vue-i18n

i18n是internationalization这个单词的缩写，取了首字母i和结尾字母n，中间一用有18个字母，所以组合起来就所写成i18n，这是一个用于给vue国际化的插件，它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

npm i vue-i18n

在 main.js 中导入并作为插件使用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

2、创建语言包对象

// 1、创建中文语言包对象
const zh = {username: '用户名',email: '邮箱',mobile: '手机'
}
// 2、创建英文语言包对象
const en = {username: 'Username',email: 'Email',mobile: 'Mobile'
}

两个第项中的键是一样的，后面在组件中要使用

3、组合对象

// 3、组合语言包对象
const messages = {zh,en
}

4、创建 i18n 实例

// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({messages,locale: 'en'
})

messages 属性要设置为第3步中组合的修啊ing
locale：的值为 messages 对象中的某个 key 的值，如果设置为 en，则组件中使用第1步中创建的英文语言中包中的对应属性的值，如果设置为 zh，则使用中文语言包中的属性的只

5、挂载对象

// 5、挂载 i18n
new Vue({i18n,render: h => h(App)
}).$mount('#app')

6、完整代码

import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 1、创建中文语言包对象
const zh = {username: '用户名',email: '邮箱',mobile: '手机'
}
// 2、创建英文语言包对象
const en = {username: 'Username',email: 'Email',mobile: 'Mobile'
}
// 3、组合语言包对象
const messages = {zh,en
}

// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({messages,locale: 'en'
})

Vue.config.productionTip = false
// 5、挂载 i18n
new Vue({i18n,render: h => h(App)
}).$mount('#app')

7、组件中使用

<template><div id="app"><p>{{ $t('username') }}</p><p>{{ $t('email') }}</p><p>{{ $t('mobile') }}</p></div>
</template>

3、扩展语言包对象

真实的项目中，可能很多地方都需要国际化，比如表格的表头、tab 栏、导航菜单等，我们可以在语言包中创建多个键，分别存储这些模块的语言

// 1、创建中文语言包对象
const zh = {table: {username: '用户名',email: '邮箱',mobile: '手机'},menus: {home: '首页',download: '下载'},tabs: {info: '商品描述',comment: '评价'}
}
// 2、创建英文语言包对象
const en = {table: {username: 'Username',email: 'Email',mobile: 'Mobile'},menus: {home: 'Home',download: 'DownLoad'},tabs: {info: 'Describe',comment: 'Comment On'}
}

组件中使用

<template><div id="app"><!-- 模拟表格中使用 --><div><p>{{ $t('table.username') }}</p><p>{{ $t('table.email') }}</p><p>{{ $t('table.mobile') }}</p></div><!-- 模拟导航菜单中使用 --><div><p>{{ $t('menus.home') }}</p><p>{{ $t('menus.download') }}</p></div><!-- 模拟tabs 选项卡中使用 --><div><p>{{ $t('tabs.info') }}</p><p>{{ $t('tabs.comment') }}</p></div></div>
</template>

此时，如果将 locale 的值切换为 zh

// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({messages,locale: 'zh'
})

实际开发中，多个组件中可能存在多个表格、导航菜单等，每个表格的表头、菜单的描述信息可能都不尽相同

该如何处理呢？

以表格的表头为例

我们可以在语言包对象中，定义多个 table，如 userTable、roleTable等，每个当中存储自己的字段和对应的语言，也可以在一个 table 对象中，定义多个字段，把所有表格用到的表头信息全都定义在一个 table 对象中

4、单独的语言包文件

语言包对象最后可能会比较大，属性比较多，所以最好的办法是将其定义成单独的 js 文件，然后再进行整合

1、创建语言包文件

src 目录下新建 langurage 目录，在其中新建 zh.js 和 en.js 文件，然后将上面的语言包代码拷贝进来，因为一会要使用语言包对象，所以要导出

zh.js

// 1、创建中文语言包对象
export default{table: {username: '用户名',email: '邮箱',mobile: '手机'},menus: {home: '首页',download: '下载'},tabs: {info: '商品描述',comment: '评价'}}

en.js

// 2、创建英文语言包对象
export default {table: {username: 'Username',email: 'Email',mobile: 'Mobile'},menus: {home: 'Home',download: 'DownLoad'},tabs: {info: 'Describe',comment: 'Comment On'}
}

2、整合语言包文件

我们将整合语言包对象和创建 VueI18n 实例并配置的过程写到一个 js 文件中，然后在 main.js 中导入

这样 main.js 中代码就会简练很多，毕竟 main.js 中只是最后需要一个 VueI18n 的实例即可

langurage 目录中新建 index.js，代码如下

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh'
import en from './en'

Vue.use(VueI18n)

const messages = {zh,en
}
const i18n = new VueI18n({messages,locale: 'en'
})
export default i18n

3、main.js 中引入

import Vue from 'vue'
import App from './App.vue'
import i18n from './langurage'

Vue.config.productionTip = false
// 5、挂载 i18n
new Vue({i18n,render: h => h(App)
}).$mount('#app')

5、切换语言

当前切换语言，需要修改如下代码中的 locale 的值

const i18n = new VueI18n({messages,locale: 'en'
})

手动切换当然不行了，页面中可以提供一个按钮，点击时，动态改变这里的值

通过 navigator.language 方法可以获取浏览器当前使用的语言，基本就代表了用户所使用的语言

// 获取浏览器当前使用的语言，并进行处理
const i18n = new VueI18n({messages,locale: navigator.language // 获取浏览器的语言
})

组件中加入语言切换按钮

    <button @click="translate('zh')">切换为中文</button><button @click="translate('en')">切换为英文</button>

  methods: {translate(lang) {this.$i18n.locale = lang},},

这样，我们就实现了语言的切换了

6、动态菜单如何处理

如下面的导航菜单是请求后台数据，然后借用 element-ui 中的 menu 组件动态渲染的

返回的菜单名称字段（authName）的值都是中文，此时该如何处理呢？

很简单，语言包中定义相关数据

zh.js

export default {menus: {用户管理: '用户管理',用户列表: '用户列表',角色列表: '角色列表',权限管理: '权限管理',权限列表: '权限列表'}
}

en.js

export default {menus: {用户管理: 'User Manager',用户列表: 'User List',角色列表: 'Role List',权限管理: 'Rights Manager',权限列表: 'Rights List'}
}

menu 组件渲染时，加入如下代码

在 methods 中定义方法 menusTitle

  menusTitle(item) {if (this.$te('menus.' + item)) {return this.$t('menus.' + item)}return item},

现在我们实现翻译功能

头部加上一个 switch 进行语言切换

<el-switchv-model="langValue":active-text="active_text":inactive-text="inactive_text"@change="translate"
>

data 中的数据

 langValue: false,lang: '',active_text: '',inactive_text: '',

组件初始化时对上面的值进行初始化设置

methods 中定义此方法，并在 created 钩子函数中调用

 setSwitch() {this.active_text = navigator.language === 'zh' ? '英文' : '中文'this.inactive_text = navigator.language === 'zh' ? '中文' : '英文'this.lang = navigator.language},

switch 的 change 事件处理程序

translate() {this.lang = this.lang === 'zh' ? 'en' : 'zh'this.$i18n.locale = this.lang
},

7、如何调整语言设置

在浏览器的语言设置中，可以调整语言，然后刷新页面，浏览器就会采用最新的语言设置

vue i18n 国际化保姆级教程_看不懂自己找原因相关推荐

sql注入进阶/user-agent/基于报错的注入/保姆级教程/一看就会/
刚刚写了cisp安全工程与运营,写的我头昏脑胀,迷迷糊糊,接下来开始sql注入第五章节,也是最后一种注入类型"基于报错的盲注"与sqlmap,下一章就开始刷题,争取今天把sql注入 ...
vue+element项目手机号、邮箱校验保姆级教程
vue+element项目手机号.邮箱校验保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验标题先说注意点 prop黄色框框起来的一定要有废话不多 ...
判断是不是链接正则_Python 正则表达式保姆级教程，小学生都看得懂！！
~点击蓝字关注,获取更多资源~ 0 前言上一篇文章,2020,还不会正则???,和小伙伴们一起学习了 Python 中的正则表达式,读完之后,总感觉少了点什么东西,无法尽兴?就好像爱你们的心少了 ...
图片适应窗口_毕业论文排版保姆级教程——图片和公式排版
[小技巧]Origin作图过程中如何让图看起来更生动 2020-05-30 [小技巧]简单设置让你origin导出的图片不在有大白边 2020-05-29 [干货放送]萤火科研资源免费赠送第一期--必 ...
自媒体人平台运营保姆级教程！速看！
自媒体人平台运营保姆级教程!速看! 一.三大媒体发布平台分析微博:微博是指一种基于用户关系信息分享.传播以及获取的通过关注机制分享简短实时信息的广播式的社交媒体.网络平台,允许用户通过Web.Wap ...
ac2100 反弹shell无法粘贴_手把手带你玩转NAS 篇二十一：小米Redmi AC2100路由器刷机padavan保姆级教程...
手把手带你玩转NAS 篇二十一:小米Redmi AC2100路由器刷机padavan保姆级教程 2020-05-14 18:49:24 224点赞 1790收藏 241评论你是AMD Yes党?还是 ...
保姆级教程从零搭建云服务器(小彩蛋，请大家看烟花秀)
笔者已从零搭建好云服务器,在文章开始笔者请大家看一场简单的烟花秀,该篇博文是写给小白的保姆级教程,不论是有基础还是没基础的,都可以根据本篇博文,轻松搭建个人云服务器. 烟花秀:浏览器直接输入ysw.w ...
Vue脚手架的安装（保姆级教程）
Vue脚手架的安装(保姆级教程) 文章目录 Vue脚手架的安装(保姆级教程) 1.下载vscode 2.node下载 5.Vue脚手架的安装 6.创建Vue项目 7.项目的运行 1.下载vscode ...
100内奇数之和流程图_论文写作篇【03】——毕业论文排版保姆级教程之页眉/页脚设置...
论文写作篇[01]--毕业论文排版痛点保姆级教程,请查收!论文写作篇[02]--毕业论文排版保姆级教程之图片/公式处理很多人都觉得页眉页脚设置非常头疼,其实如果弄清楚其中的原理,设置好各种各样要求的页 ...

vue i18n 国际化保姆级教程_看不懂自己找原因