element plus i18n 配置
时间: 2023-11-14 11:07:15 浏览: 65
vue-i18n结合Element-ui的配置方法
要配置 Element Plus 的 i18n,需要先安装 `vue-i18n`,然后在项目中创建一个 `i18n` 目录,将语言文件放在该目录下。语言文件的命名应该遵循 ISO 639***18n` 并配置:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import messages from './i18n'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
const i18n = createI18n({
locale: 'zh-CN',
messages
})
app.use(i18n)
app.use(store)
app.use(router)
app.mount('#app')
```
其中,`messages` 是一个对象,包含了所有语言的翻译。例如:
```javascript
const messages = {
'en-US': {
hello: 'Hello, world!'
},
'zh-CN': {
hello: '你好,世界!'
}
}
```
在组件中使用翻译时,可以使用 `$t` 方法:
```html
<template>
<div>{{ $t('hello') }}</div>
</template>
```
这样就可以根据当前语言自动显示对应的翻译了。
阅读全文