升级到 Vue 3 并将 Vue 实例化更新为 createApp 后，webpack 构建失败并出现 Module not found: Error: Can't resolve 'vue'

Posted 2023-02-22

【中文标题】升级到 Vue 3 并将 Vue 实例化更新为 createApp 后，webpack 构建失败并出现 Module not found: Error: Can\'t resolve \'vue\'

【英文标题】：After upgrading to Vue 3, and updating Vue instantiation to createApp, webpack build fails with Module not found: Error: Can't resolve 'vue'升级到 Vue 3 并将 Vue 实例化更新为 createApp 后，webpack 构建失败并出现 Module not found: Error: Can't resolve 'vue'

【发布时间】：2021-03-23 00:41:03

【问题描述】：

在完成所有必需的 Vue 3 升级后，我无法摆脱 webpack 构建期间非常无用的错误消息：

Module not found: Error: Can't resolve 'vue'

我在 package.json 中更新到了最新的 Vue 版本（3.0.4）

我更新了所有其他包，包括vue-loader (16.1.1)，并从vue-template-compile 升级到@vue/compiler-sfc (3.0.4)

我把main.js的初始化代码改成了import createApp from 'vue';和createApp( App ).mount( '#app' );

我已经删除了 node_modules 并重新运行 npm install，所以 'vue' 肯定在那里。

我什至将所有 Vue 组件都简化为实际上只包含 html。

为什么它仍然说找不到'vue'。大多数谷歌搜索结果都是关于 laravel 的建议，但我不使用它。

【问题讨论】：

你可以查看我的答案here

@BoussadjraBrahim 谢谢，但不确定这如何解决我的问题，因为它似乎与我已经用 @vue/compiler-sfc 替换的 vue-template-compile 有关。不过谢谢。可能对其他人有用，因为 vue3 升级会改变很多事情。

查看本教程以了解没有 vue-cli 的 Vue v3 设置：frontendguruji.com/blog/…

【参考方案1】：

经过大量研究，发现您可能需要检查 webpack 配置别名部分，因为 vue 包中的 Vue 构建引用在 Vue2 和 Vue3 之间发生了变化。

如果您有以下别名集指向 Vue 运行时，则需要对其进行更新。

旧：

resolve: 
    alias: 
        'vue$': 'vue/dist/vue.runtime.esm.js',
    

改为：

resolve: 
    alias: 
        'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
    

更多信息请访问Vue 3 docs

【讨论】：

谢谢。从 Vue 2 升级到 Vue 3 时，Webpack 别名需要更新。