【金秋打卡】第18天 element-plus 国际化处理

课程名称：基于Vue3最新标准，实现后台前端综合解

课程章节： 第一章

课程讲师：Sunday

课程内容：

    

1. element-plus 语言包：用来处理 element 组件的国际化功能

2. 自定义语言包：用来处理 非element 组件的国际化功能

   
   

首先需要安装 element-plus

npm i element-plus

在 plugins/index

添加 中英文包

import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'

并且注册使用

import store from '@/store'export default app => {
  app.use(ElementPlus, {
    locale: store.getters.language === 'en' ? en : zhCn 
  })
}

在需要使用国际化的页面中 引入

import { useI18n } from 'vue-i18n'
// 并将使用的数据 进行转换
i18n.t('msg.login.usernameRule')
// 如果是在template里面 则是
{{ $t('msg.login.title') }}  $t的方式

在一个就是处理缓存， 不然在刷新页面后 就会恢复之前的样子 

进行缓存的方式有两种

1. vuex 缓存

2. LocalStorage 缓存

   
   

import store from '@/store'/**
 * 返回当前 lang
 */
 function getLanguage() {
  return store && store.getters && store.getters.language
 }

先判断store是否存在 在判断 store中是否有getters 最后在判断 是否有language

lang 文件中分别有两个js 存放英文和中文的 各种json

import { createI18n } from 'vue-i18n'
import mZhLocale from './lang/zh'
import mEnLocale from './lang/en'
import store from '@/store'

const messages = {
  en: {
    msg: {
      ...mEnLocale
    }
  },
  zh: {
    msg: {
      ...mZhLocale
    }
  }
}

/**
 * 返回当前 lang
 */
function getLanguage() {
  return store && store.getters && store.getters.language
}

const i18n = createI18n({
  // 使用 Composition API 模式，则需要将其设置为false
  legacy: false,
  // 全局注入 $t 函数
  globalInjection: true,
  locale: getLanguage(),
  messages
})

export default i18n