JavaScript 您现在的位置是:首页 > 开发笔记 > JavaScript

Element UI 结合VueI18n实现国际化

来源:惠达浪原创 发布时间:2021-03-22 最后更新:2021-03-22 3164已围观

摘要最后一个项目中,要多语言表现,前后端都使用了VUE + Element UI,并使用vue-i18n实现了多语言表现,特此记录。

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,这样就解决了路由中使用多语言的问题。

很赞哦! (277)


站点信息

  • 网站平台ThinkCMF 5.1.5
  • PHP版本:7.3.31
  • QQ交流群: 惠达浪技术交流