移动端浏览器出现Vue draggable未定义错误，如何按需注册组件？

数据老陈

2026-6-16

解决方案：条件注册Vue3 Draggable组件

当然可以通过条件判断来注册vuedraggable组件，这正是解决移动端报错问题的有效手段。

问题原因

移动端浏览器出现vue draggable is not defined错误，通常是因为CDN脚本加载失败（比如网络波动），或者部分移动端浏览器对UMD模块的解析存在兼容性问题，导致全局变量vuedraggable未被正确初始化。

具体实现

通过判断vuedraggable变量是否存在，决定是否注册组件，同时提供降级方案避免页面崩溃：

1. 修改脚本引入（可选，添加加载失败监听）

<script src="//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js" onerror="window.sortableLoaded = false"></script> 
<script src="https://unpkg.com/vuedraggable@4.1.0/dist/vuedraggable.umd.min.js" onerror="window.vuedraggableLoaded = false"></script>

2. 条件注册组件

const mainSortBundleApp = createApp(sortBundleApp);

// 仅当vuedraggable存在时注册组件
if (typeof vuedraggable !== 'undefined') {
  mainSortBundleApp.component('draggable', vuedraggable);
} else {
  // 注册降级组件，用静态列表替代拖拽功能
  mainSortBundleApp.component('draggable', {
    props: ['list', .../* 原组件需要的其他props */],
    template: `
      <div class="static-list">
        <div v-for="item in list" :key="item.id" class="list-item">
          {{ item.content }}
        </div>
      </div>
    `
  });
}

mainSortBundleApp.config.compilerOptions.whitespace = 'preserve';
mainSortBundleApp.mount('#vueSortableApp');