从零搭建基于element-plus的Vue3项目02——国际化多语言支持

多语言支持

这里要支持多语言，需要控件支持多语言，以及自己项目要支持多语言，另外要提供多语言的切换功能。

element-plus多语言

element plus的国际化多语言参考：https://element-plus.gitee.io/zh-CN/guide/i18n.html

引入element国际化资源

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

element-plus全局配置：https://element-plus.gitee.io/zh-CN/component/config-provider.html

切换语言需要通过全局配置实现。

day.js多语言

element-plus使用了day.js，也需要定义day.js的多语言

import 'dayjs/locale/zh-cn'
dayjs.locale('zh-CN') // 全局使用简体中文
dayjs.weekdays() //  [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ]

项目多语言

项目自己的国际化需要使用vue-i18n，实际上是vue-i18n的新版本v9.x，以前vue-i18n v8.x是vue2使用的，要注意版本和文档地址，以前老版本的文档不能用，要使用新的文档地址。

文档地址：https://vue-i18n.intlify.dev/

老版本文档（Vue2）：https://kazupon.github.io/vue-i18n/zh/

github地址：https://github.com/intlify/vue-i18n-next

安装vue-i18n

npm install vue-i18n --save

自定义资源文件，我这里使用messages_cn.js和messages_en.js分别存放中英文资源的key：

import { createI18n } from 'vue-i18n'
import messagesCn from './messages_cn'
import messagesEn from './messages_en'

const i18n = createI18n({
  locale: 'zh-CN', // set locale
  fallbackLocale: 'zh-CN', // set fallback locale
  messages: {
    'zh-CN': messagesCn,
    'en-US': messagesEn
  }
})
app.use(i18n)

自定义资源文件，我这里使用messages_cn.js和messages_en.js分别存放中英文资源的key：

// 通用资源
const common = {
  label: {
    login: '登录',
    index: '首页'
  }
}
export default {
  common
}

使用示例：

{{ $t('common.label.login') }}

实际资源文件就是js对象

语言动态切换

要实现语言切换，需要使用不同的方式组合，element-plus需要用ConfigProvider实现，其他都有自己的实现方式

1. element-plus修改语言
   1. 修改configProvider的locale值： <el-config-provider :locale="elementLocale.localeData">
2. day.js修改语言
   1. 调用dayjs.locale('zh-CN')
3. vue-i18n修改语言
   1. 修改 i18n.global.locale.value = 'zh-CN'的值

GlobalConfigStore存储国际化信息

参考代码：

import { createI18n } from 'vue-i18n'
import { ref } from 'vue'
import messagesCn from './messages_cn'
import messagesEn from './messages_en'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import 'dayjs/locale/zh-cn'
import dayjs from 'dayjs'
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
import { GlobalLocales } from '@/consts/GlobalConstants'

const DEFAULT_LOCALE = 'zh-CN'
dayjs.locale(DEFAULT_LOCALE) // dayjs的语言配置

const i18n = createI18n({
  locale: DEFAULT_LOCALE, // set locale
  legacy: false, // you must set `false`, to use Composition API
  fallbackLocale: DEFAULT_LOCALE, // set fallback locale
  messages: {
    'zh-CN': messagesCn,
    'en-US': messagesEn
  } // set locale messages
})

export const elementLocale = ref({ // 用于element-plus
  localeData: zhCn
})

export const changeMessages = locale => {
  i18n.global.locale.value = locale
  elementLocale.value.localeData = locale === DEFAULT_LOCALE ? zhCn : en
  dayjs.locale(locale.toLowerCase())
}

export const $changeLocale = locale => {
  useGlobalConfigStore().changeLocale(locale)
}

// store中全局修改locale
const currentLocale = ref(GlobalLocales.CN)
changeLocale (locale) {
  if (Object.values(GlobalLocales).includes(locale)) {
    currentLocale.value = locale
  } else {
    throw new Error(`Locale ${locale} is not supported.`)
  }
  changeMessages(locale)
}

需要的地方调用globalConfigStore.changeLocale('zh-CN')之类的实现语言切换

element-plus配合config-provider使用：

  <el-config-provider :locale="elementLocale.localeData">
    <router-view />
  </el-config-provider>

最终开源地址：

https://github.com/fugary/simple-element-plus-template