解决element-plus 组件国际化无法显示中文问题

element-plus 组件国际化

按照官方文档的只要在
main.js里面引入就好,但是我引入根本没法解决问题

import locale from 'element-plus/es/locale/lang/zh-cn'

createApp(App).use(store).use(router).use(ElementPlus).use(ElementPlus, {locale}).mount('#app')

还是显示英文
在这里插入图片描述

解决

通过 ConfigProvider 的方式来使用。
App.vue中使用el.config.provider包裹组件

<template>
  <el-config-provider :locale="locale">

<div>
<!--头部-->
  <Header/>

<!--  主体-->
  <div style="display: flex">

<!--    侧边栏-->
    <Aside/>
<!--    内容区域-->
    <router-view style="flex: 1"/>
  </div>
</div>

  </el-config-provider>
</template>

<script>
import Header from "@/components/Header";
import Aside from "@/components/Aside";
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

export default {
  name : "layout",
  components : {
    Aside,
    Header,
    [ElConfigProvider.name]: ElConfigProvider,
  },
  data() {
    return {
      locale: zhCn,
    }
  },
}
</script>

加入之后完美解决:
在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值