vue3 - 项目集成vue-i18n国际化和Element Plus 国际化

GitHub Demo 地址

在线预览

一、vue-i18n国际化

vue-i18n是一个国际化多语言插件 官网地址

安装

npm install vue-i18n@9
1

创建语言文件

在项目中创建一个lang 文件夹用于存放不同语言的翻译文件。在lang 文件夹下，可以按模块创建不同语言的文件，如 zh-cn.ts（中文）和 en.ts（英文）

en.ts 示例

export default {
  // 路由国际化
  route: {
    Dashboard: 'Dashboard',
    DataCenter: 'Data Center',
    // setting
    SystemSetting: 'System Setting',
    SystemUser: 'User Manage',
    SystemRole: 'Role Manage',
    SystemMenu: 'Menu Manage',
    SystemDict: 'Dict Manage'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

zh-cn.ts 示例

export default {
  // 路由国际化
  route: {
    Dashboard: '首页',
    DataCenter: '数据中心',
    // setting
    SystemSetting: '系统设置',
    SystemUser: '用户管理',
    SystemRole: '角色管理',
    SystemMenu: '菜单管理',
    SystemDict: '字典管理'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

创建一个index.ts文件配置vue-i18n并且整合整个lang文件夹下面的所有语言文件

import { createI18n, I18nOptions } from 'vue-i18n'
import { store } from '@/store'
import { useAppStore } from '@/store/modules/app'

// 本地语言包
import enLocale from './package/en'
import zhCnLocale from './package/zh-cn'

const appStore = useAppStore(store)

function siphonI18n(prefix = 'zh-CN') {
  return Object.fromEntries(
    Object.entries(import.meta.glob('./**/*.ts', { eager: true })).map(([key, value]: any) => {
      const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1]
      return [matched, value.default]
    })
  )[prefix]
}

const messages = {
  'zh-cn': {
    ...zhCnLocale,
    ...siphonI18n('zh-cn')
  },
  en: {
    ...enLocale,
    ...siphonI18n('en')
  }
}

const i18n = createI18n({
  legacy: false, // 如果想在composition api中使用需要设置为false
  locale: appStore.language,
  // TODO: Type instantiation is excessively deep and possibly infinite.  https://github.com/intlify/vue-i18n-next/issues/1119
  messages: messages as I18nOptions['messages'],
  globalInjection: true // 如果设置true, $t() 函数将注册到全局
})

export default i18n

// import i18n from '@/lang/index'
// const { t } = i18n.global
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

i18n 全局注册

在项目的入口文件中（通常是 main.ts），导入配置

// 国际化
import i18n from '@/lang/index'

app.use(i18n).mount('#app');
1
2
3
4

使用

因为在配置vue-i18n时设置了globalInjection: true，因此可以直接使用$t

在模板中使用

<template>
  <div>
    {{ $t('route.Dashboard') }}
  </div>
</template>
1
2
3
4
5

在ts中使用

import i18n from '@/lang/index'

i18n.global.t('route.Dashboard')
1
2
3

监听语言改变

import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

// t('route.Dashboard') 在ts也可以这样使用

watch(
  () => locale.value,
  (value) => {
    nextTick(() => {
  		// 一些操作
    })
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13

语言切换

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

locale.value = 'zh-cn'
locale.value = 'en'
1
2
3
4
5

实现语言切换的组件

<template>
  <el-dropdown trigger="click" @command="handleLanguageChange">
    <div>
      <svg-icon icon-class="language" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="appStore.language === 'zh-cn'" command="zh-cn"> 中文 </el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'en'" command="en"> English </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()
const { locale } = useI18n()

function handleLanguageChange(lang: string) {
  locale.value = lang
  appStore.changeLanguage(lang)
  if (lang == 'en') {
    ElMessage.success('Switch Language Successfully!')
  } else {
    ElMessage.success('切换语言成功！')
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果图

二、Element Plus 国际化

Element Plus 国际化 官网文档

Element Plus 提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。
这里配合pinia实现国际化切换

使用ConfigProvider 组件 全局配置国际化

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
</script>

<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
</template>

1
2
3
4
5
6
7
8
9
10
11
12

切换语言和监听改变实现

定义 store

import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';
import defaultSettings from '@/settings';

// 导入 Element Plus 中英文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';

// setup
export const useAppStore = defineStore('app', () => {
    
  const language = useStorage('language', defaultSettings.language);
    
  /**
   * 根据语言标识读取对应的语言包
   */
  const locale = computed(() => {
    if (language?.value == 'en') {
      return en;
    } else {
      return zhCn;
    }
  });

  /**
   * 切换语言
   */
  function changeLanguage(val: string) {
    language.value = val;
  }

  return {
    language,
    locale,
    changeLanguage
  };
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

切换语言外部调用

import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

 appStore.changeLanguage(lang)
1
2
3
4
5

效果图