vue3+vite3打包组件的踩坑心得

1.再要做CDN的JS组件库文件的时候要使用  

rollup-plugin-external-globals

这个插件，但是不做CDN的时候要关闭注释掉，不然引入插件后可能会报一些依赖库的全局变量未声明的错误，比如
Vue  is  not defined  这样的错误，

建议再打包的时候可以用环境变量控制一下

 

2.vue3本身不能和vue2一样使用name属性去声明组件名字，这时候打包的话在use  install过程中少了名字即使你的代码模块能被正确加载，但是组件却不能被识别，这时需要

import DefineOptions from "unplugin-vue-define-options/vite";

这个插件可以声明vue3的组件的名称，方便打包成组件后install中可以调用从而识别组件

 

3.打包的时候记得不要忽略dist文件夹，不然会找不到指向的模块，这里如果有.npmignore会先看这里有没有忽略，然后才是.gitignore，但是一般个人觉得，gitignore就够用了

 

4.对于引用方，记得CDN环境下，rollup-plugin-external-globals这个一定要写好，不然引用方也找不到库的全局变量

 

 

更多配置参考我的vue3组件项目，注释中都已经写好了，希望能帮到大家

https://github.com/luochenLing/virtualScroll