记录 unplugin-vue-components不生效

wade

发布于 2024-06-17 07:43:03

69512

代码可运行

文章被收录于专栏：coding个人笔记coding个人笔记

运行总次数：2

代码可运行

之前用 vite + VUE3 + TS 开发了几个项目，最近因为一个新项目，想着升级这些版本，就重新起了一个项目，结果遇到了让自己爆炸的问题。

element-plus 官方推荐的按需引入，配置也给的明明白白：

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

结果是无法引入：

App.vue:17 [Vue warn]: Failed to resolve component: el-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <App>

auto-imports.d.ts 文件和 components.d.ts 文件都有生成，components.d.ts 里面也出现了组件的引入：

/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    ElButton: typeof import('element-plus/es')['ElButton']
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
  }
}