i18n和element-plus国际化语言

前言

本篇主要介绍国际化语言切换，目前分为两部分。

vue-i18n国际化：用于日常的多语言切换。

element-plus国际化：用于element-plus ui 语言切换，element-plus 自身已经集成国际化语言了，因此用官方的国际化语言就行

vue-i18n国际化

依赖说明

pnpm add vue-i18n@9.1.10 -S

注：vue3版本需要vue-i18n：9.x 以上

配置说明

新建 src/lang/index.js文件

import { createI18n } from 'vue-i18n'
//导入语言文件 
import en from './en'
import zh from './zh'
import es from './es'
import ja from './ja'
const messages = {en, zh, es, ja}

//i18n实例配置
const localeData = {
  globalInjection: true, //如果设置true, $t() 函数将注册到全局
  legacy: false, //如果想在composition api中使用需要设置为false
  // set locale
  // options: en | zh | es
  locale: localStorage.getItem('language'),
  messages  // set locale messages
}

// 提供install方法，给vue.use进行创建实例
export const setupI18n = {
  install(app) {
    const i18n = createI18n(localeData)
    app.use(i18n)
  }
}

en , zh 从源码中获取，这里就不列举了

main.js中

//i18n
import { setupI18n } from '@/lang'
app.use(setupI18n)

此时i18n配置完成

如何使用

i18n体验例子

页面中使用

<template>
 <div>{{ t(`Dashboard`) }}</div>
</template>
<script setup>
//必须要在顶级setup中引入
import { useI18n } from 'vue-i18n'
const { t } = useI18n({ useScope: 'global' })
</script>

通过t方法接收一个字符串，此时会根据你选择的语言进行，语言转换

动态切换i18n语言

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
//动态切换语言
locale.value = "zh" //"cn"
</script>

通过 locale.value设置语言就可以无感切换语言

移除i18n 的warning

vite.config.js

    resolve: {
      alias: {
        //remove i18n waring
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
      }
    },

element-plus国际化语言

element-plus中的国际化切换通过官方提供的el-config-provider配置集成

如何实现

src/app.vue

<template>
  <el-config-provider size="large" :locale="locale11">
    <router-view />
  </el-config-provider>
  <el-button @click="switchLang">switchLang</el-button>
</template>
<script setup>
import { ElConfigProvider } from 'element-plus'
//获取element-plus国际化语言文件
import zh from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
let locale11 = $ref(en)
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n({ useScope: 'global' })
const switchLang = () => {
  locale11 = zh
  locale.value = 'zh'
}
</script>

通过el-config-provider 的 **local **属性就能实现 element-plus国际化语言动态切换

此时vue-i18n国际化和element-plus国际化语言集成都说完了，那么如何统一切换语言呢


<script setup>
import { ElConfigProvider } from 'element-plus'
//获取element-plus国际化语言文件
import zh from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
let locale11 = $ref(en)
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n({ useScope: 'global' })
const switchLang = () => {
  //切换element-plus
  locale11 = zh
  //切换i18n
  locale.value = 'zh'
}
</script>

提供个方法 handleSetlang 传入相应的lang ("zh"或"cn") 就能修改成您想要的语言了

vue3-admin-plus官方文档入口

vue3-admin-plus文档集成入口