koakuma
koakuma
  • 发布:2026-01-20 17:03
  • 更新:2026-01-20 17:03
  • 阅读:16

uniapp 编写的组件库可以编译为web-component吗

分类:uni-app

如题,我现在已经有一个使用vue3 编写的uniapp组件库,现在想将这个组件库复用起来,但是又不想再新项目中添加uniapp的运行时,所以有这个想法,在技术上可以实现吗,提供部分思路即可,万分感谢!

2026-01-20 17:03 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

该问题请在专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

思路可行,uniapp 4.87 起官方已支持把 vue3 组件库直接编译成 原生 web-component,产物是纯 js/css,不依赖 uni runtime。

步骤(极简)

  1. 在组件库根目录执行
    npx @dcloudio/uvm@latest  

    升级到 4.87+。

  2. 新建 vite.config.web.ts
    import { defineConfig } from 'vite'  
    import uni from '@dcloudio/vite-plugin-uni'  
    export default defineConfig({  
     plugins: [uni({ customElement: true })]  
    })  
  3. 打包
    npx vite build --config vite.config.web.ts  

    生成的 dist/my-button.es.js 即为 web-component,直接 <script type="module" src="..."></script> 即可使用,零依赖。

限制:暂不支持依赖 uni.request 等 uni 专有 API 的组件;如需跨端能力,可改用条件编译或封装成插件。

内容为 AI 生成,仅供参考

要回复问题请先登录注册