国际化 vue-i18n

首先通过navigator.language识别浏览器的语言

1.安装插件

9x不支持vue2x

npm i vue-i18n@8.24.3

第二步，需要单独新建一个多语言的实例化文件 src/lang/index.js

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
Vue.use(VueI18n) // 全局注册国际化包
​
// 创建国际化插件的实例
const i18n = new VueI18n({
})
// 导出多语实例
export default i18n

第三步，在main.js中挂载 i18n实例和配置element组件i18n支持

+ import i18n from '@/lang'
​
​
- Vue.use(ElementUI)
+ Vue.use(ElementUI, {
+  i18n: (k, v) => i18n.t(k, v)
+ })
​
// 加入到根实例配置项中
new Vue({
  el: '#app',
  router,
  store,
+  i18n,
  render: h => h(App)
})

2.2 ElementUI多语言配置

引入element语言包文件src/lang/index.js

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
+ import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
+ import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包
​
// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文
+  locale: 'zh',
  // 将elementUI语言包加入到插件语言数据里
+ messages: {
    // 英文环境下的语言数据
    en: {
      ...elementEN
    },
    // 中文环境下的语言数据
    zh: {
      ...elementZH
    }
+  }
})
​
export default i18n

说明❓：locale指定的值和要messages对象中定义的语言包key保持一致

测试：手动修改locale属性值，改成zh 或者 en

查看日历组件的星期显示

自定义内容多语言配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEN from 'element-ui/lib/locale/lang/en'
import elementZH from 'element-ui/lib/locale/lang/zh-CN'
// 引入自定义中文包
+ import customZH from './zh'
// 引入自定义英文包
+ import customEN from './en'

Vue.use(VueI18n)

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型
  locale: 'zh',
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
+      ...customEN // 将自定义英文包加入
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
+      ...customZH // 将自定义中文包加入
    }
  }
})

2. 理解中英文切换原理

当我们引入VueI18n语言插件之后，每个组件实例都拥有了一个$t方法，这个方法可以帮助我们进行语言转换，可以根据当前的语言类型，使用传入的key去寻找当前key对应的文本

3. 实现title中英文切换

添加语言配置

zh.js

export default {
  navbar: {
    search: '站内搜索',
    logOut: '退出登录',
    dashboard: '首页',
    github: '项目地址',
    screenfull: '全屏',
    theme: '换肤',
    lang: '多语言',
    error: '错误日志'
  }
}

en.js

export default {
  navbar: {
    search: 'search',
    logOut: 'Log Out',
    dashboard: 'Dashboard',
    github: 'Github',
    screenfull: 'screenfull',
    theme: 'theme',
    lang: 'i18n',
    error: 'error log'
  }
}

修改头部模板渲染

语法：$t(语言包定义的属性)

<div class="app-breadcrumb">
  {{ $t('navbar.title') }}
  <span class="breadBtn">体验版</span>
</div>

多语言动态切换

this.$i18n.locale = lang // 设置给本地的i18n插件