search

unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue
https://www.npmjs.com/package/unplugin-vue-components
MIT License
3.68k stars 342 forks source link

vue使用cdn引入后，vant依赖无法被打包，components.d.ts文件中会自动删除vant组件 #664

Open vivid05 opened 11 months ago

vivid05 commented 11 months ago

Describe the bug

vue使用cdn引入后，vant依赖无法被打包，components.d.ts文件中会自动删除vant组件

Reproduction

使用vite-plugin-cdn-import-async，将vue用cdn引入，打包时会自动删除vant

System Info

mac

Used Package Manager

npm

Validations

lishaobos commented 11 months ago

需要一个可复现的 git 仓库

vivid05 commented 11 months ago

需要一个可复现的 git 仓库

vite项目，安装vite-plugin-cdn-import和vant，使用vite-plugin-cdn-import引入vue的cdn。代码里面使用vant按需引入，打包时就会出现vant依赖丢失。猜测问题应该是vite-plugin-cdn-import和unplugin-vue-components执行顺序问题发生了冲突。

vivid05 commented 11 months ago

需要一个可复现的 git 仓库 复现仓库

lishaobos commented 11 months ago

我把你的 lock 删了，安装后，打包没啥问题：

image

vivid05 commented 11 months ago

我把你的 lock 删了，安装后，打包没啥问题：

image

问题是打包的时候没有把vant 打进去，可以看页面上的vant文案没有任何样式，实际它是一个vant 按钮，开发环境可以看到

lishaobos commented 11 months ago

不好意思，我开始看错了，我看了下，稍微改变下 cdn plugin 的语法就 ok

vivid05 commented 11 months ago

如何修改，大佬

lishaobos commented 11 months ago

@vivid05 我已经给 cdn 插件提了 pr，但是看着好久不维护了，你可以 fork 下来，照着我的修改改一下，就三行代码

https://github.com/MMF-FE/vite-plugin-cdn-import/pull/41/files

lishaobos commented 11 months ago

我试过了，ok，你看下 vant 项目最终使用的 cdn 是不是修改后打包的文件，

lishaobos commented 11 months ago

这个是打包后的样子，你可以试试打印下，是否进去了

image image

jsLWQ commented 8 months ago

研究了一天，我知道了，艹。 打包的时候，再执行下 rollupOptions: { output: { chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称 entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称 assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等 manualChunks(id) { if (id.includes('node_modules')) { return 'vendor' } } }, // 告诉打包工具 在external配置的 都是外部依赖项 不需要打包 external: ['vue', 'pinia', 'vue-router'], plugins: [ Components({ resolvers: [VantResolver()], }), externalGlobals({ // "在项目中引入的变量名称"："CDN包导出的名称，一般在CDN包中都是可见的" vue: 'window.Vue', pinia: 'window.Pinia', 'vue-router': 'window.VueRouter', }) ] }

image