采坑道路4:vite报错(vue3.0+element-plus )由一个语言包引起的问题
事情起因:在用element-plus写分页的时候,发现默认的样式始终是英文,如图:因为想转成中文,在尝试各种方法无果后,只能寻求度娘了,发现处理的方法都一样import ElementPlus from 'element-plus'import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, {locale: z
·
事情起因:在用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>
然后大功告成!
更多推荐
已为社区贡献4条内容
所有评论(0)