vue-i18n国际化多语言与多套UI组件库使用（Element Plus、Ant Design Vue、Naive UI）

技术栈：Vue3+TypeScript+Vite+SCSS+（Element Plus、Ant Design Vue、Naive UI）

demo源码：Vue3 UI Lang

因调研需要，需在同一个项目中集成好几种UI组件库的多语言实现，查看各种组件库的表现情况，以便选定组件库。

注意：这只在调研过程中会如此，实际开发项目中极少存在一个项目中集成多个UI组件库的情况。

本demo实际试验阿拉伯语、法语、葡萄牙语、英语、中文五种语言。

VUE3+TypeScript+vue-i18n的项目基架参考本博客 VUE3 +TypeScript + i18n多语言结合使用

Element Plus

安装

npm install element-plus --save

main.ts 引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// ...
app.use(ElementPlus)

utils/common 获取当前语言

export const getCurrLang = () => {
  const localLang: string = navigator.language.split('-')[0]; // 浏览器语言
  const storageLang: string | null = sessionStorage.getItem("language"); // 本地存储语言
  return storageLang || localLang || 'en';
}

lang/index 多语言源

import { createI18n } from 'vue-i18n'
import { getCurrLang } from "@/utils/common"

// elementPlus
import EleAr from 'element-plus/dist/locale/ar.mjs'
import EleFr from 'element-plus/dist/locale/fr.mjs'
import ElePt from 'element-plus/dist/locale/pt.mjs'
import EleEn from 'element-plus/dist/locale/en.mjs'
import EleZhCn from 'element-plus/dist/locale/zh-cn.mjs'

const messages = {
  ar: {
    ele: EleAr
  },
  fr: {
    ele: EleFr
  },
  pt: {
    ele: ElePt
  },
  en: {
    ele: EleEn
  },
  zh: {
    ele: EleZhCn
  },
}
const i18n = createI18n({
  globalInjection: true, // 全局注入
  locale: getCurrLang(), // 当前语言
  messages,
  legacy: false,
})

export default i18n

App.vue 全局配置国际化

<script setup lang="ts">
import { computed } from 'vue';
import { RouterView } from 'vue-router'
import { ElConfigProvider } from 'element-plus'

import i18n from './lang';
const locale = computed(() => (i18n.global.messages.value[i18n.global.locale.value]))
console.log(i18n.global.messages.value[i18n.global.locale.value]) // 语言包中的当前语言环境包配置
console.log(i18n.global.messages.value) // 语言包完整配置
console.log(i18n.global.locale.value) // 当前语言环境
</script>

<template>
  <el-config-provider :locale="locale.ele">
    <RouterView />
  </el-config-provider>
</template>
<style scoped></style>

由此，就可在页面中使用涉及到国际化的组件了，比如el-color-picker、el-date-picker、el-time-picker、el-image、el-tree-select、el-popconfirm、el-empty、el-calendar、el-table、 el-pagination、 el-page-header等。

效果

中文：

阿拉伯语：

Ant Design Vue

安装

npm i ant-design-vue -S
npm i unplugin-vue-components unplugin-auto-import -D // 按需引入需要的插件

vite.config.js 配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less', // 一定要开启这个配置项
        }),
      ],
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
    }
  }
})

lang/index 多语言源

import { createI18n } from 'vue-i18n'
import { getCurrLang } from "@/utils/common"

// Ant Design Vue
import AntAr from 'ant-design-vue/es/locale/ar_EG.js'
import AntFr from 'ant-design-vue/es/locale/fr_FR.js'
import AntPt from 'ant-design-vue/es/locale/pt_PT.js'
import AntEn from 'ant-design-vue/es/locale/en_US.js'
import AntZh from 'ant-design-vue/es/locale/zh_CN.js'

const messages = {
  ar: {
    ant: AntAr,
  },
  fr: {
    ant: AntFr,
  },
  pt: {
    ant: AntPt,
  },
  en: {
    ant: AntEn,
  },
  zh: {
    ant: AntZh,
  },
}

const i18n = createI18n({
  globalInjection: true, // 全局注入
  locale: getCurrLang(),
  messages,
  legacy: false,
})

export default i18n

App.vue 全局配置国际化

<script setup lang="ts">
import { computed } from 'vue';
import { RouterView } from 'vue-router'

import i18n from './lang';
const locale = computed(() => (i18n.global.messages.value[i18n.global.locale.value]))
console.log(i18n.global.messages.value[i18n.global.locale.value])
console.log(i18n.global.messages.value)
console.log(i18n.global.locale.value)
</script>

<template>
   <a-config-provider :locale="locale.ant">
      <RouterView />
   </a-config-provider>
</template>
<style scoped></style>

效果

中文：

阿拉伯语：

Naive UI

安装

npm i -D naive-ui
npm i -D vfonts // 安装字体

lang/index 多语言源

import { createI18n } from 'vue-i18n'
import { getCurrLang } from "@/utils/common"

// native UI
import { arDZ, frFR, ptBR, zhCN, enUS, } from 'naive-ui'

const messages = {
  ar: {
    nai: arDZ,
  },
  fr: {
    nai: frFR,
  },
  pt: {
    nai: ptBR,
  },
  en: {
    nai: enUS,
  },
  zh: {
    nai: zhCN,
  },
}

const i18n = createI18n({
  globalInjection: true, //全局生效$t
  locale: getCurrLang(),
  messages,
  legacy: false,
})

export default i18n

App.vue 全局配置国际化

<script setup lang="ts">
import { computed } from 'vue';
import { RouterView } from 'vue-router'
import { NConfigProvider,NMessageProvider } from 'naive-ui'

import i18n from './lang';
const locale = computed(() => (i18n.global.messages.value[i18n.global.locale.value]))
console.log(i18n.global.messages.value[i18n.global.locale.value])
console.log(i18n.global.messages.value)
console.log(i18n.global.locale.value)
</script>

<template>
      <n-config-provider :locale="locale.nai">
        <n-message-provider>
          <RouterView />
        </n-message-provider>
      </n-config-provider>
</template>
<style scoped></style>

效果

中文：

阿拉伯语：

最后

此处只编写了部分代码，完整源码请查看文章开始部分git链接。
此处只针对多语言文本进行调研，部分语言会有左对齐、右对齐的差异，这里并不包含这部分内容。