Element UI 结合VueI18n实现国际化

5、在vue的主文件 main.js 中，导入并使用

// main.js

import Vue from 'vue'

// ... 这里是一堆你的项目导入的内容

// 导入咱写好的i18n实例（文件名是index.js的可以省略）
import i18n from '@/language'

// 在新建的Vue实例中，加上多语言功能。如果是vue3，按新写法就行
new Vue({
  el: '#app',
  i18n, // 注意此行。
  router,
  store,
  render: h => h(App)
})

使用：使用就简单了，需要显示文字的地方，就用i18n的 $t 函数。例如：

当然，如果你在主语言包中，也分级了，那么也要一级一级地使用，这是 js 基础了。

切换：使用切换时就超级简单了，代码只写如何处理，页面布局自由发挥。

// ... 其它代码
method: {
  // ... 其它方法
  
  /**
   * 切换语言操作
   * @param {string} lang 要切换的语言，只能是事先约定的定义，即i18n.messages下边的键
   */
   handleChangeLanguage(lang) {
    // 如果lang是已经定义的语言包
    if (Object.keys(this.$i18n.messages).includes(lang)) {
     // 将当前语言定义切换为所选语言
     this.$i18n.locale = lang
     
     // 将语言设置保存在localStorage中，避免每次都要切换
     window.localStorage.setItem('language', lang)
    }
   }
}

路由使用：最后的问题是路由。vue-router和这个i18n是平级的，因此在路由中无法使用 $t 函数。解决的办法也是超级简单，只需将路由中和 title，原本希望显示的内容变成语言包的键，然后在页面中就可以直接使用 $t 函数了。

// cn-zh.js 或子语言包中定义

... // 其它定义

  nav: {
    home: '主页',
    about: '关于我们'
  }
...

// router/index.js 路由中的使用

... // 其它路由
{
  path: '/',
  name: 'home',
  component: import('@/view/index'),
  title: 'nav.home' // 注意这行
},
{
  path: '/about',
  name: 'about',
  component: import('@/view/about'),
  title: 'nav.about' // 注意这行
},

// view/navbar/index.js 导航条组件文件，不要在意文件名和位置

... // 其它代码

最后的示例中，navs是已经处理好的路由内容，因此 nav.title 就是路由定义时的 title，这样就解决了路由中使用多语言的问题。