记录 unplugin-vue-components不生效

之前用 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个人笔记

相关推荐

  1. 记录 unplugin-vue-components生效

    2024-06-12 14:14:03       8 阅读
  2. 自动导入组件unplugin-auto-import和unplugin-vue-components

    2024-06-12 14:14:03       43 阅读
  3. vue的build先上部署的 devServer生效的场景记录

    2024-06-12 14:14:03       13 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-12 14:14:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-12 14:14:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-12 14:14:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-12 14:14:03       18 阅读

热门阅读

  1. 【持久层】PostgreSQL使用教程

    2024-06-12 14:14:03       11 阅读
  2. Springboot配置websocket,https使用 WebSocket 连接

    2024-06-12 14:14:03       9 阅读
  3. React组件通信方式总结

    2024-06-12 14:14:03       5 阅读
  4. 原生js实现缩略图

    2024-06-12 14:14:03       4 阅读
  5. perf kvm to profile vm_exit

    2024-06-12 14:14:03       12 阅读
  6. unordered_set,unordered_map模拟实现

    2024-06-12 14:14:03       7 阅读
  7. Web前端入门必学:解锁数字世界的魔法钥匙

    2024-06-12 14:14:03       6 阅读
  8. PHP 文件上传:全面指南与最佳实践

    2024-06-12 14:14:03       8 阅读
  9. linux top 中显示swap用量并排序

    2024-06-12 14:14:03       8 阅读
  10. Redis 数据持久化策略和数据过期策略

    2024-06-12 14:14:03       6 阅读
  11. flutter EventBus

    2024-06-12 14:14:03       5 阅读
  12. 什么是前端工程化?

    2024-06-12 14:14:03       6 阅读
  13. table根据字段合并单元格

    2024-06-12 14:14:03       6 阅读