vue cli3 局部引入Element Plus组件时无法成功渲染组件的问题
问题描述
默认npm下载的babel-plugin-importbabel-plugin-import
和element-plus
是最新版本,使用babel-plugin-importbabel-plugin-import
插件在对element-plus
处理会出现无法进行局部导入的问题。
代码如下:
// package.json
"babel-plugin-import": "^1.13.5",
"element-plus": "^2.2.5",
//babel.config.js
module.exports = {
plugins: [
[
'import',
{
libraryName: 'element-plus',
customStyleName: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`
}
}
]
],
presets: ['@vue/cli-plugin-babel/preset']
}
//App.vue
<template>
<el-button>按钮</el-button>
<el-button type="danger">按钮</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'App',
components: {
ElButton
}
})
</script>
报错
解决方案
根据官方的issues,可以知道"element-plus"不同的版本中目录结构发生变化(可以发现在npm下载最新的element-plus和回滚到旧版本的element-plus结构发生变化),我们可以尝试将element-plus的版本降到"1.0.2-beta.55" 即可解决,看起来是回滚到没有types.ts
的版本