vite导入cdn的element-ui，Message真整不会了

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

最近接手一个新项目后，一直报错ElementUI为defined?

本地却没事，这就很是诡异，查找当前引入是:

import {Message} from 'element-ui'

看起来是没有任何问题的，本地好好的，怎么就是报错了

发现

查看打包后的源码，Message都转成了，ElementUI.Message,而ElementUI未定义

代码里没有声明ElementUI，一直找到vite配置文件

...externalGlobals({
          vue: 'Vue',
          'vue-router': 'VueRouter',
          'vue-demi': 'VueDemi',
          'element-ui': 'ElementUI',
          vant: 'Vant'
    })

vite配置的externals捆绑外部的cdn引入文件，而element-ui全部处理成ElementUI，可能cnd引入的包里定义了！

cdn源码：

当前完全没有ElementUI定义，只看到一个：

cdn里define了ELEMENT

控制台里测试： window.ELEMENT.Message('test')

完全可行

最后

最后优化本地和线上打包两个适配

import { Message } from 'element-ui'

if (window.ELEMENT) window.ELEMENT.Message()
else Message()

最终修改

看当前组件可行，后面整体配置修改绑定的变量名吧，可能是我没看到文档有清晰的指明“ELEMENT”， 最后想想原因，可能就是webpack之前的externals配置教程太多了，如果直接复制粘贴那就是可以了，可是element-ui打包文件一直更新，最终定义了“ELEMENT”，最后就是vite是本地不去编译，这很可能导致打包后才能发现，有坑不大，改改吧

...externalGlobals({
          'element-ui': 'ELEMENT',
        })

最后绑定element-ui到ELEMENT，最后都找全局的ELEMENT，有问题再具体分析吧，就这样，踩坑三千问，每天来一条，耽误自己5分钟即记录。