为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第18天 element-plus 国际化处理

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

2022.11.10 08:42 112浏览

课程名称:基于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


https://img3.sycdn.imooc.com/636c48c70001e30b07370734.jpg














点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
14
获赞与收藏
9

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消