Nuxt项目集成vue-draggabilly插件失败，报exports未定义错误求助

我之前也碰到过一模一样的问题，这个错误本质是vue-draggabilly采用了CommonJS模块规范，但Nuxt默认没把它转译为浏览器能识别的ES模块格式，导致浏览器环境不认识Node.js里的exports对象。下面是亲测有效的解决步骤：

1. 确保依赖安装完整 #

首先确认你已经安装了插件本身以及它的核心依赖draggabilly（很多人会漏掉这个）：

npm install vue-draggabilly draggabilly
# 或者用yarn
yarn add vue-draggabilly draggabilly

2. 配置Nuxt转译该插件 #

在nuxt.config.js的build选项里添加transpile配置，告诉Nuxt需要把这个插件转译为浏览器兼容的格式：

export default {
  // 其他配置...
  build: {
    transpile: ['vue-draggabilly', 'draggabilly']
  }
}

3. 正确注册插件（二选一即可） #

方式一：全局注册（适合项目多处使用） #

在项目的plugins目录下新建vue-draggabilly.js文件，内容如下：

import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'

Vue.component('VueDraggabilly', VueDraggabilly)

然后在nuxt.config.js的plugins数组中注册这个插件，并且指定mode: 'client'（因为拖拽是纯浏览器端功能，不需要在服务端渲染）：

export default {
  // 其他配置...
  plugins: [
    { src: '~/plugins/vue-draggabilly.js', mode: 'client' }
  ]
}

方式二：局部注册（适合仅个别组件使用） #

直接在需要使用的组件中局部引入，同时注意只在客户端环境加载：

<template>
  <vue-draggabilly>
    <div class="draggable-box">我是可拖拽的元素</div>
  </vue-draggabilly>
</template>

<script>
export default {
  components: {
    // 用动态导入确保只在客户端加载
    VueDraggabilly: () => import('vue-draggabilly')
  }
}
</script>

<style scoped>
.draggable-box {
  width: 200px;
  height: 200px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}
</style>

4. 清除缓存并重启项目 #

有时候Nuxt的缓存会导致配置修改不生效，执行以下命令清除缓存后重新启动：

npm run clean
npm run dev

之前你集成其他插件成功，大概率是因为那些插件本身就是ES模块格式，或者已经被Nuxt默认纳入转译范围了，而vue-draggabilly用的是CommonJS，所以需要手动配置转译。

内容的提问来源于stack exchange，提问作者Dom Huxley