Vue2迁移至Vue3时出现Cannot read properties of undefined (reading 'use')错误求助

错误原因分析 #

这个错误核心是代码中尝试调用Vue.use()时，Vue变量为undefined。Vue3与Vue2的核心API使用方式差异较大，同时依赖兼容性、构建配置错误也可能引发该问题。

具体解决步骤 #

1. 修正Vue实例化与插件注册代码 #

Vue3不再暴露全局Vue构造函数，默认导出的是包含createApp等方法的对象，直接调用Vue.use()会报错。根据是否使用兼容模式调整代码：

情况1：使用@vue/compat兼容模式（保留Vue2写法）

确保导入的是@vue/compat而非vue：

// resources/assets/js/app.js
import Vue from '@vue/compat'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ElementPlus from 'element-plus'

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(ElementPlus)

new Vue({
  el: '#app',
  router,
  store
})

情况2：完全使用Vue3写法（推荐）

改用createApp创建应用实例，通过实例调用use：

// resources/assets/js/app.js
import { createApp } from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ElementPlus from 'element-plus'

const app = createApp(App)
app.use(VueRouter)
app.use(Vuex)
app.use(ElementPlus)

app.mount('#app')

2. 移除webpack.mix.js中多余的override配置 #

你手动修改vue-loader规则的代码存在逻辑问题：rule.test == '/\.vue$/'用字符串匹配正则表达式永远不成立，且laravel-mix的.vue({ version: 3 })已经自动配置了正确的vue-loader，手动修改可能导致构建异常。删除这段代码：

// 删掉以下内容
.override((webpackConfig) => {
    webpackConfig.module.rules = webpackConfig.module.rules.map(function (rule) {
      if (rule.test == '/\.vue$/') {
        rule.use[0].loader = 'vue-loader';
      }
      return rule;
    });
  })

3. 替换不兼容的依赖包 #

你安装的element-ui-el-table-draggable是为Vue2的Element UI设计的，与Vue3的Element Plus不兼容，会引发异常。替换为Element Plus兼容的表格拖拽方案，比如使用sortablejs实现：

# 卸载旧包
npm uninstall element-ui-el-table-draggable
# 安装sortablejs
npm install sortablejs

在组件中使用SortableJS实现表格拖拽：

import Sortable from 'sortablejs'

export default {
  mounted() {
    const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
    Sortable.create(tableEl, {
      onEnd: (evt) => {
        // 处理拖拽后的逻辑
      }
    })
  }
}

4. 清理缓存重新构建 #

清除旧依赖和构建缓存，确保所有依赖正确安装：

rm -rf node_modules package-lock.json
npm install
npm run dev

内容的提问来源于stack exchange，提问作者World's famous people