uniapp 打包微信小程序时 vuedraggable 未放到 uni_modules 里怎么解决

我在使用uniapp打包微信小程序时遇到了一个问题：vuedraggable组件没有放到uni_modules目录里该怎么解决？请问有没有人遇到过类似情况，或者知道如何正确引入这个组件？求解决方法！

2 回复

将vuedraggable组件手动复制到uni_modules目录下，然后在pages.json中配置组件路径即可。


在UniApp中使用vuedraggable时，如果未将其放入uni_modules目录，可以通过以下步骤解决：

  1. 手动安装依赖
    在项目根目录下执行命令安装vuedraggable：

    npm install vuedraggable[@next](/user/next) --save

  2. 引入组件
    在需要使用vuedraggable的页面或组件中，通过import引入：

    <script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  // 其他代码...
};
</script>

  3. 配置H5兼容性（可选）
    如果仅在小程序中使用，可跳过此步。若需兼容H5，检查vue版本是否兼容vuedraggable（推荐Vue 2.x配合vuedraggable@next）。

  4. 处理小程序兼容问题
    vuedraggable依赖HTML5拖拽API，小程序环境不支持。需通过条件编译或替换方案：

    • 条件编译：仅H5使用vuedraggable，小程序使用原生movable-area组件：
      <template>
  <!-- #ifdef H5 -->
  <draggable v-model="list">
    <div v-for="item in list" :key="item.id">{{ item.name }}</div>
  </draggable>
  <!-- #endif -->
  <!-- #ifdef MP-WEIXIN -->
  <movable-area>
    <movable-view v-for="item in list" :key="item.id">{{ item.name }}</movable-view>
  </movable-area>
  <!-- #endif -->
</template>
    • 替代方案：直接使用uni-app的movable-area和movable-view实现拖拽，放弃vuedraggable。

  5. 检查构建配置
    确保vue.config.js（如有）未屏蔽node_modules，并重新构建项目。

总结：核心问题是vuedraggable依赖的浏览器API在小程序中不可用。推荐使用uni-app原生组件movable-area替代，或通过条件编译区分环境。

回到顶部