Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
5 tasks done
vivid05 opened this issue Jul 25, 2023 · 11 comments · May be fixed by MMF-FE/vite-plugin-cdn-import#41

Comments

@vivid05
Copy link

vivid05 commented Jul 25, 2023

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

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

需要一个可复现的 git 仓库

@vivid05
Copy link
Author

vivid05 commented Jul 29, 2023

需要一个可复现的 git 仓库

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

@vivid05
Copy link
Author

vivid05 commented Jul 29, 2023

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

@lishaobos
Copy link
Contributor

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

image

@vivid05
Copy link
Author

vivid05 commented Aug 2, 2023

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

image

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

@lishaobos
Copy link
Contributor

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

@vivid05
Copy link
Author

vivid05 commented Aug 3, 2023

如何修改,大佬

@lishaobos
Copy link
Contributor

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

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

@lishaobos
Copy link
Contributor

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

@lishaobos
Copy link
Contributor

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

image
image

@jsLWQ
Copy link

jsLWQ commented Nov 8, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants