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 zhCn from './zh-cn'
import en from './en'
// 创建 i18n
const i18n = createI18n({
legacy: false,
globalInjection: true, // 全局模式,可以直接使用 $t
locale: localStorage.getItem('lang') || 'zhCn',
messages: {
zhCn,
en
}
})
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')
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)
}
网友评论