Vite创建的项目中Element-Plus类型导入失败问题求助

问题根源 #

npm init vue是Vue官方脚手架，生成的项目默认配置了适配Element-Plus类型识别的TypeScript编译规则；而npm create vite创建的基础Vue项目，tsconfig.json的默认配置不够完善，导致无法正确解析Element-Plus导出的类型成员。

具体解决步骤 #

1. 修正tsconfig.json配置 #

打开项目根目录的tsconfig.json，在compilerOptions节点中补充/修改以下配置项：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "types": ["element-plus"]
  }
}

如果已有对应配置，确认没有被注释或写错。

2. 统一Element-Plus版本 #

检查两个项目的element-plus版本是否一致，建议在Vite项目中安装最新稳定版：

npm install element-plus@latest

3. 清除缓存重置依赖 #

若调整配置后仍报错，执行以下操作重置项目依赖：

• 删除项目根目录的node_modules文件夹和package-lock.json文件
• 重新安装依赖：npm install
• 重启Vite开发服务：npm run dev

补充说明 #

Element-Plus的类型定义自带在包内，无需额外安装@types/element-plus，只需确保项目使用Vue 3+版本即可。

内容的提问来源于stack exchange，提问作者龙龙Ago