解决模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage

一、问题介绍

在使用vite+element-plus+ts搭建项目时，导入ElMessage组件遇到【模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?】这一错误提示

二、出现原因

ts识别不到element-plus对外暴露的ElMessage这一类型

三、解决思路

在根目录env.d.ts这个文件中添加如下声明类型代码：

1.在env.d.ts中添加如下代码：

import { ElMessage } from "element-plus"
// 手动声明 ElMessage
declare module 'element-plus' {
  export class ElMessage {
    static success(message: string): void;
    static warning(message: string): void;
    static info(message: string): void;
    static error(message: string): void;
  }
}

2.修改tsconfig.app.json和tsconfig.node.json文件

分别在tsconfig.app.json和tsconfig.node.json中新增一行"moduleResolution": "node",

// tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "moduleResolution": "node",
    "composite": true,
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

// tsconfig.node.json
{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
  "compilerOptions": {
    "moduleResolution": "node",
    "composite": true,
    "module": "ESNext",
    "types": ["node", "element-plus/global"]
  }
}

在 TypeScript 中，moduleResolution 配置选项用于指定模块解析策略，即指定 TypeScript 编译器如何解析模块导入的路径。

至此，问题解决！

四、总结

1、问题复现: 使用npm create @vue3命令构建一个Vue3+Ts项目，安装Element Plus，在App.vue页面的script里导入ElMessage就能复现这个问题

2、错误提示不影响本地启动以及使用，只是导入的地方有波浪线提示

3、可在单个页面上通过手动声明解决该问题；在声明文件中使用则会和全局导入冲突，因为声明的类型不全，所以存在错误提示

4、moduleResolution设置为Node即可解决