vite+ts+element-plus按需导入后引用ElMessage组件报错或者样式丢失

报错现象

按需导入后，使用 ElMessage 出现报错：

点击 “Quick Fix” 可以查看解决方法

解决方法提示：

添加手动导入后，报错消失：

import {
    
     ElMessage } from 'element-plus'

但是手动导入后，组件样式失效了，如下：

解决方法一：手动导入后，引入 ElMessage 组件的样式文件

可以在 “main.ts” 文件中引用 ElMessage 组件的样式文件

import 'element-plus/es/components/message/style/css'

如下：

正常展示效果如下：

解决方法二：修改 eslintrc 配置

① “ vite.config.ts ” 文件添加 配置：

AutoImport({
    
    
      // 增加 eslintrc，自动生成 .eslintrc-auto-import.json 文件
      eslintrc: {
    
    
        enabled: true
      },
      // 、、、
    }),

保存后自动生成了 “.eslintrc-auto-import.json” 文件

② “ .eslintrc.cjs ” 添加配置：

'extends': [
    // 、、、
    './.eslintrc-auto-import.json'
  ],
  rules: {
    
    
    'no-undef': 0
  },

③ “tsconfig.app.json” 文件 中 “ include ” 配置添加 “./auto-imports.d.ts”

"include": ["./auto-imports.d.ts"],

如下：

配置完以上几个文件后，再查看页面用引入 ElMessage 组件，样式正常了，但是 vscode 编辑器中报错可能没有马上消失，关闭 vscode 后重新打开，报错就消失了