《vue3+ts+element-plus 后台管理系统系列》之国际化

星宇大前端

发布于 2021-03-02 06:31:07

2.5K00

代码可运行

文章被收录于专栏：大宇笔记大宇笔记

运行总次数：0

代码可运行

vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。

演示地址：https://admin-tmpl.rencaiyoujia.com/
github地址：https://github.com/rcyj-FED/vue3-composition-admin

国际化主要是利用 vue-i18n-next ，是因为项目使用composition api风格，需要最新兼容。

国际化目录

思路理解

准备好语言包messages，包含自己建的en.ts,zh-cn.ts 和 element-plus语言包
当前选择locale
创建i18n
放在 plugins 自动加载

代码实现

1. 导入生成Message 语言包

import elementEnLocale from 'element-plus/lib/locale/lang/en'
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn'
// User defined lang
import enLocale from './en'
import zhLocale from './zh-cn'


const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  'zh-cn': {
    ...zhLocale,
    ...elementZhLocale
  }
}

2. 获取当前语言

选择语言存储在cookie，getLanguage读取。

export const getLocale = () => {
  //读取cookie存入的当前语言
  const cookieLanguage = getLanguage()
  //如果有返回当前语言
  if (cookieLanguage) {
    return cookieLanguage
  }
  //如果没有，获取系统语言
  const language = navigator.language.toLowerCase()
  //获取messages 语言 遍历
  const locales = Object.keys(messages)
  for (const locale of locales) {
  	//如果messsage 包里面有系统语言返回
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }

  // 默认语言 简体中文
  return 'zh-cn'
}

3. 创建i18n实例，并使用

const i18n = createI18n({
  locale: getLocale(),
  messages: messages
})

export default i18n

 app.use(i18n)

4.使用国际化语言

模板：

<template>
  {{ t('key') }}
</template>

ts:

setup() {
    const { t } = useI18n()
    return {
      t
    }
}

尝试直接写 $t() 也是可以的。

5.切换语言

import { useStore } from '@/store'
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { AppActionTypes } from '@/store/modules/app/action-types'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
type Language = {
    name: string
    value: string
}

export default defineComponent({
  setup() {
    const store = useStore()
    const { locale } = useI18n()
    const state = reactive({
      languages: [{ name: 'en', value: 'en' }, { name: '中文', value: 'zh-cn' }] as Array<Language>,
      handleSetLanguage: (lang: string) => {
        locale.value = lang
        store.dispatch(AppActionTypes.ACTION_SET_LANGUAGE, lang)
        ElMessage({
          message: 'Switch Language Success',
          type: 'success'
        })
      }
    })
    const language = computed(() => {
      return store.state.app.language
    })
    return {
      ...toRefs(state),
      language
    }
  }
})