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

[vivid05]

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

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[lishaobos]

需要一个可复现的 git 仓库

[vivid05]

需要一个可复现的 git 仓库

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

[vivid05]

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

[lishaobos]

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

[vivid05]

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

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

[lishaobos]

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

[vivid05]

如何修改，大佬

[lishaobos]

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

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

[lishaobos]

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

[lishaobos]

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

[jsLWQ]

研究了一天，我知道了，艹。 打包的时候，再执行下 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', }) ] }