在打包前端项目的过程中,尝试使用vite-plugin-cdn-import来一如vxe-table,但是一直都报xxxxis not defined的错误。于是我上vxe-table官网查找cdn引入的方法,按照官网提供的引入顺序来引入。仍然报错,在查找了许多资料后,总结了以下要点。
一、使用cdn引入时最好锁定版本
在package.json中可以看到项目使用的插件的版本号,然后在https://www.jsdelivr.com/中查找插件的url
二、在main.ts或者main.js中引入
通过cdn引入的插件需要挂载到main.ts中引入的插件名上(这样说不太准确)之后才能使用。
注意每个插件要求的挂载名不同,我刚开始引入vxe-table使用的是VxeTable,结果一直报错,官网上也没有说明,最后是打开插件的下载路径,比如上图中https://cdn.jsdelivr.net/npm/vxe-table@4.7.72/lib/index.umd.min.js,注意到其中有个VXETable,然后讲引入名改成VXETable之后就不报错了。
三、var与mani.ts中的名字要一样
在vite.config.js中配置插件cdn时,var与main.ts中的挂载名要一致,不然到时候引入插件时,不知道挂载到哪里。