vue i18n 国际化保姆级教程 |
您所在的位置：网站首页 › vue写app的步骤 › vue i18n 国际化保姆级教程 |
vue i18n 国际化保姆级教程
|
本文已参与「新人创作礼」活动，一起开启掘金创作之路 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、组件中使用 {{ $t('username') }} {{ $t('email') }} {{ $t('mobile') }} 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' } }组件中使用 {{ $t('table.username') }} {{ $t('table.email') }} {{ $t('table.mobile') }} {{ $t('menus.home') }} {{ $t('menus.download') }} {{ $t('tabs.info') }} {{ $t('tabs.comment') }}此时，如果将 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 // 获取浏览器的语言 })组件中加入语言切换按钮 切换为中文 切换为英文 methods: { translate(lang) { this.$i18n.locale = lang }, },这样，我们就实现了语言的切换了 如下面的导航菜单是请求后台数据，然后借用 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 进行语言切换 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 },在浏览器的语言设置中，可以调整语言，然后刷新页面，浏览器就会采用最新的语言设置 |
【本文地址】