公司网站首页模板创造与魔法官方网站一起做喜欢的事

之前用 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']}
}

我还特地去提了个 issue，结果别人用这个 repo 可以，我就让两三个同事试试，结果惊呆了我，都可以，node 版本一模一样，有一个把整个项目打包给我（包括 node_modules），我的电脑还是不行。

也不知道自己怎么乱尝试的，网上各种文章跟着各种配置，结果就是引入不了。后面发现其实也有别人遇见了这个问题，还去提了 issue：
https://github.com/unplugin/unplugin-vue-components/issues/752

官方人员试了，都能正常工作，也找了几个网上的热心人员帮忙，都一样，跟电脑有关系。

最终结果是我降了版本，v0.26.0 可以，我顺便也去提了 issue，描述了一下跟电脑有关系，结果不知道什么时候可以回复。

这种问题确实也是不好解决，不知道跟电脑哪些东西冲突了，本来不自量力打算本地怎么调试找一下问题，down 了 unplugin-vue-components 项目，结果不知道怎么运行调试。

如果有小伙伴知道答案，希望能分享一下，如果有调试 unplugin-vue-components 的方法，也希望能分享一下。

欢迎关注订阅号 coding个人笔记