Vue3 + Element Plus + i18n 国际化

1 前言

本篇旨在 Vue3 + Element Plus 国际化配置，支持多语言切换

2 Vue3 国际化

2.1 安装 vue-i18n

npm i vue-i18n

2.2 新建 locales 文件夹

以简体中文和英文为例

• 在 src 下新建 locales 文件夹
• 在 locales 文件夹下新建 zh-cn.ts

export default {
  buttons: {
    login: '登录'
  },
  menus: {
    home: '首页'
  }
}

• 在 locales 文件夹下新建 en.ts

export default {
  buttons: {
    login: 'Login'
  },
  menus: {
    home: 'Home'
  }
}

• 在 locales 文件夹下新建 index.ts

import { createI18n } from 'vue-i18n'
import EN from './en'
import ZH from './zh'
const messages = {
  en: {
    ...EN
  },
  zh: {
    ...ZH
  }
}
 
const getCurrentLanguage = () => {
  //设置
  const UAlang = navigator.language // zh-CN
  const langCode = UAlang.indexOf('zh') !== -1 ? 'zh' : 'en'
  localStorage.setItem('lang', langCode)
  return langCode
}
 
const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: getCurrentLanguage() || 'zh', //去getCurrentLanguage函数找有没有设置的语言,默认选择zh
  messages: messages
})
 
export default i18n

2.3 注册 i18n

在 main.ts 文件下注册 i18n

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales'
 
const app = createApp(App)
 
app.use(i18n)
 
app.mount('#app')

vue组件按钮切换

<!-- 切换语言 -->
<template>
  <!--  command用法很简单,绑定在el-dropdown-item标签的"zh"值和"en",让其发生变化时候做出其他操作,类似监听标签属性 -->
  <el-dropdown @command="handleCommand">
    <!-- 这里的用的icon是阿里巴巴的-iconfont -->
    <span v-if="currentLanguage === 'zh'" size="30" class="iconfont icon-zhongyingwenqiehuan-zhongwen"></span>
    <span v-if="currentLanguage === 'en'" size="30" class="iconfont icon-zhongyingwenqiehuan-yingwen"></span>
 
    <template #dropdown>
      <el-dropdown-menu>
        <!-- command绑定值"zh"  disabled是标签属性,不然选择-->
        <el-dropdown-item command="zh" :disabled="currentLanguage === 'zh'"
          >中文</el-dropdown-item>
        <!-- command绑定值"zh" disabled是标签属性,不然选择-->
        <el-dropdown-item command="en" :disabled="currentLanguage === 'en'"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
  
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { computed, ref } from "vue";
import { useStore } from "vuex";
 
const i18n = useI18n();
const store = useStore();
 
//获取当前的语言是什么,让页面标签el-dropdown-item变成灰色不然点击,只能让其点击没选中的
const currentLanguage = computed(() => {
  return i18n.locale.value;
});
 
//command用法很简单,绑定在el-dropdown-item标签的"zh"值和"en",让其发生变化时候做出其他操作,类似监听标签属性
//和在便签中定义函数传参类似的
const handleCommand = (val:string) => {
  //command获取值切换语音
  i18n.locale.value = val;
};
</script>
  
<style lang="scss" scoped>
.el-dropdown {
  position: absolute;
  right: 52px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

2.4 使用方法

2.4.1 在 template 中的使用

{{ $t('menus.home') }}

2.4.2 在 ts 中的使用

import i18n from './locales'
 
console.log(i18n.global.t('menus.home'))

3 Element Plus 国际化

Element Plus 官方提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置
el-config-provider 由 Element Plus 按需引入 - 自动导入
el-config-provider 手动导入：import { ElConfigProvider } from 'element-plus'

<template>
  <el-config-provider :locale="useAppStoreHook().locale === 'zhCn' ? zhCn : en">
    <app />
  </el-config-provider>
</template>
 
<script lang="ts" setup>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'
import { useAppStoreHook } from '@/store/modules/app' //store存放语言配置
</script>

4 语言切换

切换语言时，修改 store 、 localstorage 和 i18n 中的语言配置

// store/modules/app
 
import { defineStore } from 'pinia'
import { store } from '@/store'
import i18n from '@/locales'
 
const useAppStore = defineStore('app', {
  state: () => {
    return {
      locale: localStorage.getItem('lang') || 'zhCn'
    }
  },
  actions: {
    SET_LOCALE(locale: string) { //语言切换
      this.locale = locale
      storageLocal.setItem('lang', locale)
      i18n.global.locale.value = locale
    }
  }
})
 
export function useAppStoreHook() {
  return useAppStore(store)
}

遇到问题：

使用i18n控制台警告信息:
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

解决：
在vue.config.js配置中添加如下：

chainWebpack: config => {
    config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
}