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

背景：在使用Element Plus写demo时，导入ElMessage组件出现 【模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?】的错误提示

环境：Vue3 + Vite + Ts + Element Plus

定位：问题出在ts的语法检查，import { ElMessage } from 'element-plus'; 时在框架里找不到ElMessage这个对象。

　　在之前的demo中，ElMessage基本都是可用的，参照Element Plus官方文档的示例使用即可，现在突然不能用了，检查了一下语法，没有变化，都是import { ElMessage } from 'element-plus'; 于是想到版本问题，可能是因为用的最新的包，所以有些类型识别不出，导致出现错误提示，由于老项目是没问题的，所以对比老项目，把Element Plus包的版本还原到 2.2.30，重新install， enmmmm 问题依然存在。

　　语法OK，版本OK，那么这里排除Element Plus框架的问题了，继而把焦点放到Ts，这种识别不到类型的问题，大部分和Ts有关，为了排查框架问题所以优先检查的Element Plus。

　　同样的做法，还原一下Ts的包版本，重新install，嗯，没用，波浪线依然存在，那就和包没关系了。既然识别不到ElMessage这个类型，那么就自然而然的想到类型声明了！

　　So，在import { ElMessage } from 'element-plus'; 下面手动加入声明的代码，如下：

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;
  }
}
ElMessage.success("提示")

　　这样就没问题了，错误提示解决了，因为我手动声明了类型。考虑到很多个页面都会存在该问题，索性将类型声明加入到声明文件中。

　　So，在vite-env.d.ts这个声明文件中做如下配置：

 　　配置完之后，所有的.vue页面使用ElMessage时都OK。

　　But，mian.ts里面出现错误提示了，因为在mian里面我导入了 Element Plus，而我单独声明了element-plus这个包，里面肯定不止ElMessage，所以use的时候报错了。

　　当然了，这个错误提示其实并不影响我们的功能，项目是可以跑起来的。但是作为一个精致的老开发（极简风格和强迫症深度患者），是不允许项目存在波浪线的。

　　最后摸到Ts的配置文件，tsconfig.json，这个配置需要对Ts有一定基础，经过对Ts配置的一番研读，最后成功定位到解决方案了，在这个配置文件中将moduleResolution节点的值修改为Node：

"moduleResolution": "Node"

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

　　至此，问题解决！

 

　　省流，总结一下：

　　　　1、先说复现，使用Vite构建一个Vue3+Ts项目，安装Element Plus，在页面的script里导入ElMessage就能复现这个问题

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

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

　　　　4、moduleResolution设置为Node即可解决

 

　　PS：一时间没有在网上找到这个问题的分析，因此这里记录一下，方便自己以后查阅，把错误提示作为标题，也方便以后其他人遇到该问题时可以马上搜到此文章。

　　以上。