Vue2迁移Vue3报错：无法解析‘vue’模块

DevOps 小满

2026-7-13

Vue2迁移Vue3后组件出现Can't resolve 'vue'错误的解决方案

问题背景

将Vue2项目迁移至Vue3后，所有组件编译时均抛出模块未找到错误，提示无法解析vue依赖。项目已安装vue@3.3.4和@vue/compat@3.3.4，且组件暂未使用setup()语法。

错误示例：

ERROR in ./app/assets/js/particles/UserButton.vue?vue&type=template&id=4bdecb56&scoped=true&lang=pug (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-pug-loader/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[10].use[0]!./app/assets/js/particles/UserButton.vue?vue&type=template&id=4bdecb56&scoped=true&lang=pug) 1:0-391
Module not found: Error: Can't resolve 'vue' in '/app/app/assets/js/particles'

项目依赖片段：

"dependencies": {
  "@vue/compat": "^3.3.4",
  "vue": "^3.3.4",
  "vuetify-loader": "^1.7.3",
},

可行解决方案

配置webpack resolve别名
Vue3的ES模块入口路径与Vue2不同，需在webpack配置中添加别名指向正确的入口文件：

// webpack.config.js 或 vue.config.js
module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js'
    }
  }
}

清理并重装依赖
可能存在依赖缓存或版本冲突，执行以下命令重新安装：
```
rm -rf node_modules package-lock.json
npm install
```
升级vue-loader版本
Vue3要求vue-loader版本≥16.x，当前项目可能使用了不兼容的旧版本，执行升级：
```
npm install vue-loader@^16.8.3 --save-dev
```
正确配置@vue/compat兼容模式
使用兼容包时，需在项目入口文件全局引入并使用compat版的应用创建方法：
```
// main.js
import { createApp } from '@vue/compat'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')
```