前段时间 clone 了 Ant Design Pro Vue 下来试着搭一个中后台来玩玩。今天因为添加了用于拖动排序的新组件 Vue.Draggable 后，页面中一直报错，页面也无法正常显示。

1
2
3
TypeError: window.Vue.component is not a function
  at Module.fb15(vuedraggable.umd.min.js)
  ...

网上查了报错，没有相同的情况，于是就开了他们的源码看了看。

在 vuedraggable/src 的最后找到了这次报错的出处：

1
2
3
if (typeof window !== "undefined" && "Vue" in window) {
  window.Vue.component("draggable", draggableComponent);
}

说来奇怪，用的是 import 方式引入的 vuedraggable 为什么提示的 window.Vue 下的报错。照理说使用 UMD 的话，优先判断的应该是 node 中的 export，然后是 require 最后才是 window。而且 window 下应该没有挂载 Vue 实例才对，那为什么判断的表达式为true了呢。

既然已经报错了，说明说 window.Vue 存在，并且是一个不同于 Vue.js 的同名对象。那么原先的 Vue 有可能不存在或者是被覆盖了。于是直接在控制台试了一下

1
console.log(window.Vue);

结果输出了一个 DOM 对象……

1
<g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">…</g>

我特么……这个 <g> 是一开始提到的 Ant Design Pro Vue 中 header 用到的 logo.svg……页面元素的 id 会自动挂载到 window 对象下……

有别于官方的 Ant Design Vue 在 header 中用到的是 src 为该 svg 的 base64 的 <img>，也有别于这个项目的落地页的 header 中直接用的一张 png，他在项目里面用到的是 svg 源文件……所以这个 id="vue" 的元素影响了引入脚本的判断，导致报错。这个也太那啥了吧……

解决方法就是把这个 id 改成 AntVue 就解决了。