Element Plus中ElMessage样式不生效,生效就会导致TS打包报错怎么办？

Question

我一开始遇到element plus 使用ElMessage出现在最底部
网上找到的方法是：
产生的原因是：使用了element plus的按需引入，然后在组件中 又import { ElMessage } from 'element-plus' 引入了一次，就会出现这个问题，
解决的方法：将组件中的引入删除，直接使用 ElMessage.success('Successfully sent ！')

但是这又带来一个新的问题，打包的时候ts会报错，因为删除了引入

我希望能让样式正常生效，且ts不报错，能正常打包

Answer 1

详细问了一下GPT：
非常好，那问题就很明确了 ✅：你的 auto-imports.d.ts 不在 src/ 目录下，TypeScript 默认不会识别它的内容，所以你虽然配置了自动导入，但 TS 报错依然存在，导致：

ElMessage 可以用，但 TS 报错（"Cannot find name 'ElMessage'"）

你一 import { ElMessage } from 'element-plus' 来消除错误，样式又炸了
（推荐）：把 auto-imports.d.ts 放到 src/ 下

AutoImport({
  imports: [
    'vue',
    {
      'element-plus': ['ElMessage'],
    },
  ],
  resolvers: [ElementPlusResolver()],
  dts: 'src/auto-imports.d.ts', // ✅ 放到 src 下！
}),

然后重新执行

rm -rf node_modules
rm -rf package-lock.json
npm install
npm run dev

检查是否生成了 src/auto-imports.d.ts