采坑道路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: 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：vite报错（vue3.0+element-plus ）由一个语言包引起的问题相关推荐

tomcat启动报错，原来是DB2的一个jar包搞的鬼
tomcat启动报错,原来是DB2的一个jar包搞的鬼现在是2019年05月14日不知道这个笔记是什么是时候记录的,好像之前有过这回事,在启动一个web项目时,遇到一个问题,网上查了一下资料解决了, ...
webpack 采坑（CleanWebpackPlugin 插件报错： CleanWebpackPlugin is not a constructor ；）
坑一: CleanWebpackPlugin 插件报错: CleanWebpackPlugin is not a constructor : webpack.config.js配置如下: const ...
element-plus打包报错/vue3.0+vite+ts别名引入ts文件报错
element-plus报错内容报错原因如下 vue-tsc 是对ts类型做检测的 element对ts支持并不是很友好所以报错但是不影响正常使用 Cannot find name 'Nullab ...
信鸽推送集成采坑之代码混淆报错/XINGE: [Util] please add wup-1.0.0.E-SNAPSHOT.jar in your libs
转载请注明:https://blog.csdn.net/u012854870/article/details/80546448 信鸽推送接入刚开始按照官方推荐加入一下混淆代码: ########### ...
SAP 对HU做货物移动报错-Only 0 serial numbers entered instead of 30 -
SAP 对HU做货物移动报错-Only 0 serial numbers entered instead of 30 - 元旦刚过,就收到客户的业务人员报错说,当其对HU做转库(同一个公司代码下工厂到 ...
vue 报错unknown custom element解决方法
vue 报错unknown custom element解决方法参考文章: (1)vue 报错unknown custom element解决方法 (2)https://www.cnblogs.co ...
【问题】连接mysql报错errorCode 0, state 08S01
[问题]连接mysql报错errorCode 0, state 08S01 解决方案只需要加上&useSSL=false url: jdbc:mysql://localhost:3306/x ...
报错Unknown custom element: ＜组件名＞ - did you register the component correctly?的原因及解决办法
报错Unknown custom element: <组件名> - did you register the component correctly?的原因及解决办法问题原因解决(第 ...
解决报错Parameter 0 of constructor in XXX required a bean...elasticsearch 继承ElasticsearchConfiguration方法
SpringBoot中构建带有含参构造函数的Bean,解决报错Parameter 0 of constructor in XXX required a bean ,elasticsearch继承Abs ...

采坑道路4：vite报错（vue3.0+element-plus ）由一个语言包引起的问题

采坑道路4：vite报错（vue3.0+element-plus ）由一个语言包引起的问题相关推荐

最新文章

热门文章