测试环境
"element-plus": "^2.3.4",
"typescript": "~5.0.4",
"@vue/tsconfig": "^0.3.2",
"vite": "^4.3.4",
问题描述
问题一
在目前最新的vite中构建Vue项目时,使用element-plus库,使用官网推荐按需自动导入方式,在ts代码中使用 import { ElForm } from 'element-plus'
类似语句导入组件时报错
模块“element-plus”没有导出的成员“ElForm”。你是想改用“import ElForm from ‘element-plus’”吗
问题二
使用element-plus官网的全局导入方式,在tsconfig.json中使用以下配置获得Volar支持时报错
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
找不到“element-plus/global”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "element-plus/global" 的入口点。
错误原因
typescript5.0版本升级,使用compilerOptions.moduleResolution: "bundler"
的模块编译选项。具体参见issue
解决方法
- 可以回退typescript版本,例如在以下版本中不会报错
"@vue/tsconfig": "0.1.3",
"typescript": "4.9.5",
- 在tsconfig.json中重写moduleResolution
{
"compilerOptions": {
"moduleResolution": "node"
}
}