基于vue3 + pinia + element-plus 增加国际化配置，支持多语言切换
【配置的时候思考了两个问题】
- 语言初始化是在pinia里面设置，还是在createI18n的时候设置
- createI18n的message属性的属性设置和elementPlus的国际化的设置是什么关系
- 取值的是直接取localstorage中的还是取useI18n的值
- 到底是怎么切换的【在app.vue已经通过控制locale的值来控制element的语言切换了】
i18n
安装vue-i18n
npm i vue-i18n
新建文件
在src下新建i18n文件夹，新建zh-cn.ts和en.ts文件以及index.ts文件
// src/i18n/zh-cn.ts
export default { router: { home: '首页', docsLink: '系统指南', }, header: { userCenter: '个人中心', codeSource: '代码仓库', systemGuide: '系统指南', logOut: '退出登录', },}; // src/i18n/en.ts
export default { router: { home: 'home', docsLink: 'System Docs ', }, header: { userCenter: 'Personal Center', codeSource: 'Code Warehouse', systemGuide: 'System Guide', logOut: 'Log Out', },};
// src/i18n/index.ts
import { createI18n } from 'vue-i18n';// import { themeConfig } from '@/config';// element-plus 的ui框架国际化语言配置import zhCnLocale from 'element-plus/lib/locale/lang/zh-cn';import enLocale from 'element-plus/lib/locale/lang/en';// 自定义的语言配置import nextZhCn from './zh-cn';import nextEn from './en';// 按照每个页面的语言配置// import loginZhcn from './pages/login/zh-cn';// import loginEn from './pages/login/en';// 定义语言国际化内容 zh-cn enconst messages = { [zhCnLocale.name]: { ...zhCnLocale, ismsg: { ...nextZhCn }, // ismsg: { ...nextZhCn, ...loginZhcn }, }, [enLocale.name]: { ...enLocale, ismsg: { ...nextEn }, },};const getCurrentLanguage = ():string => { //设置 const UAlang = navigator.language // zh-CN const langCode = UAlang.indexOf('zh') !== -1 ? 'zh' : 'en' localStorage.setItem('lang', langCode) return langCode}const i18n = createI18n({ // silentTranslationWarn: true, // missingWarn: false, // silentFallbackWarn: true, // fallbackWarn: false, globalInjection: true, legacy:false, // 使用 vue3 组合式API 时必须设置为 false // locale: themeConfig.value.globalI18n, // 采用全局参数配置初始化语言 项目中有`zh-cn`、`en`两种 locale: 'en', // locale: getCurrentLanguage() || 'zh', // fallbackLocale: zhCnLocale.name,//备用语言 messages,});export default i18n
注册
在main.ts文件中引入新建的文件，并且使用
使用方法
-
在template中使用
{{$t('router.home')}} //注意此时$t也支持复数，不需要写$tc -
在ts中使用
import i18n form '@/i18n' console.log(i18n.global.t('router.hoem')) -
可以在使用useI18n查看当前的语言
import {useI18n} from 'vue-i18n' const globalI18n = useI18n() console.log(globalI18n.locale.value)
element-plus
使用el-config-provider组件即可，从这里看到得知，初始值放在pinia里面设置比较好，因为这里可以直接使用store中配置的语言【但是吧，为什么这个作者在初始化i18n的时候也设置了】
