事情起因:在用element-plus写分页的时候,发现默认的样式始终是英文,如图:
在这里插入图片描述
因为想转成中文,在尝试各种方法无果后,只能寻求度娘了,发现处理的方法都一样

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

app.use(ElementPlus, {
  locale: zhCn,
})

天真的以为这样就好了,结果发现浏览器报了一个错误

在这里插入图片描述
很奇怪。是不是,刚开始以为是路径不对,后来发现路径没问题,难道要我去改源码?肯定不对…又是经过一轮的搜索,我猜是用的包管理器vite的问题。毕竟这个东西也是新出的,有奇奇怪怪的问题也不是没可能,通过百度,Google各种找文档,排除法,最终锁定一个vite.config.js配置文件里面一个问题。官网是这样描述的
在这里插入图片描述
Vite中文官网文档链接

通过搜索找到这个配置文件 optimizeDeps.include的写法

  optimizeDeps: {
    include: ['element-plus/lib/locale/lang/zh-cn'],
  },

到这里以为就好了?那就大错特错了…

我所使用的element-plus版本是1.0.2-beta.71
这里有一个小坑,在1.0.2-beta.59 之前可以使用上面的写法,但在1.0.2-beta.59及之后版本(目前到1.0.2-beta.71)官方提供了另外一种写法:
element-plus官网链接

在这里插入图片描述


所以最终的做法
在vite.config.js里加上

optimizeDeps: {
    include: ['element-plus/lib/locale/lang/zh-cn'],
  },

在App.vue里

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      locale: zhCn,
    }
  },
})
</script>

然后大功告成!
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐