element plus按需导入的坑
element plus版本2.1.8,用了官网的方法,靠unplugin-auto-import和unplugin-vue-components实现按需导入后,因为element plus默认是英文,所以要转成中文。此时,官网给了两个方法:方法一在main.js里添加如下代码。如果你是按需导入,千万别用,直接破功变成全局注册了。用了以后打包,包变大了两兆多。import ElementPlus
element plus版本2.1.8,用了官网的方法,靠unplugin-auto-import(版本0.6.9)和unplugin-vue-components(版本0.18.5)实现按需导入后,碰到一些问题。
按需导入后实现国际化
因为element plus默认是英文,所以要转成中文。
此时,官网给了两个方法:
第一种,在main.js里添加【import ElementPlus from ‘element-plus’】等代码。别用,用了你就不是按需导入,变全部导入了。
第二种,ConfigProvider
官网链接:https://element-plus.gitee.io/zh-CN/guide/i18n.html#configprovider
写在app.vue里,拿个ConfigProvider组件把dom包起来。和上面的方法不同,ConfigProvider不会影响按需导入,经测试,打完的包确实没有异常变大。
按需导入后,v-loading不能用了
报错信息:
Can’t resolve ‘element-plus/es/components/loading-directive/style/css’
需要给AutoImport加个正则:
AutoImport({
resolvers: [ElementPlusResolver({
exclude: new RegExp(/^(?!.*loading-directive).*$/)
})]
})
按需导入后,messageBox样式错乱,遮罩层也没了
main.js里手动引入样式
import "element-plus/theme-chalk/el-message-box.css";// messageBox的样式
import "element-plus/theme-chalk/el-overlay.css";// 遮罩层样式
更多推荐
所有评论(0)