安装vue项目启动报错Cannot find module

最新推荐文章于 2025-04-11 10:57:24 发布

转载最新推荐文章于 2025-04-11 10:57:24 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/shaleilei/article/details/78163559

vue报错专栏收录该内容

6 篇文章

订阅专栏

在学习Vuex过程中，使用cli2安装项目遇到错误。文章分析了'Cannot find module'错误的原因，通常是因为项目缺少依赖。介绍了如何通过npm install或国内镜像cnpm install来安装必要插件，最后运行cnpm run dev解决问题。

怀疑我是不是一只猪
学习vuex的时候用cli2安装项目又报错了
在这里插入图片描述
作者原文：
Cannot find module 这个是以为我们安装的项目缺少依赖：

npm install 是安装项目所需要的依赖，简单理解就是安装一些必要的插件，需要等一段时间；

当然我们也可以用国内的淘宝镜像比较快一点，cnpm isntall 安装依赖，安装完成后，cnpm run dev就可以了

版权声明：本文为优快云博主「愚蠢地人类」的原创文章
原文链接：https://blog.youkuaiyun.com/shaleilei/article/details/78163559

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青椒切小块

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue项目启动报错：Cannot find module 'semver'

祈澈菇凉

09-15

255

在启动vue项目的时候，会出现一个这样的报错： Cannot find module 'semver' 这个错误提示表明在项目中缺少 semver 模块。 semver 是一个用于处理版本号的 JavaScript 模块。要解决这个问题，可以尝试以下几个步骤： 1：确保 semver 模块已经安装：在项目目录下，打开终端(命令行界面)并运行以下命令，确保 semver 模块已经正确安装...

Electron应用程序打包后运行报错cannot find module ‘@vue/cli-service‘

weixin_44341110的博客

09-18

1725

其他electron打包后运行类似这种cannot find module ‘XXX’的报错，基本也是因为开发依赖模块未打包进去导致。2、本项目vue.config.js文件是创建vue项目时默认存在的，该文件依赖的模块非必须的，也可以修改不依赖该模块即可。也就是问题出在electron打包后，仔细排查问题所在，在electron主入口文件中依赖了vue.config.js文件。这个模块，所以electron项目打包时也需要把这个模块放进。而这个模块我们开发vue项目时放进开发依赖中不需要打包进去的。

参与评论您还未登录，请先登录后发表或查看评论

问题解决：vscode 提示【Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’

Jay的博客

07-13

8475

创建Vue3的项目后，vscode红色波浪线提示【Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to add aliases to the ‘paths’ option?抱着试一试的心态，我查看了自己vscode的版本为16.0.0，最新版本为18.0.0。于是我下载了最新的vscode安装包，更新vscode后果然提示语没有了。然而，上面的方法并不能解决我的问题。

vue3 配置storybook报错： Cannot find module ‘vuedistvue.esm.js‘

m0_67402823的博客

03-06

1254

前言之前想让自己的组件库更完善所以配置jest,搞了好久，在解析jsx语法中的slots.default!()这句话是就报错，最终搁置了，今天想让自己的组件库添加storybook,感觉被官网坑了一上午，不过好歹成功了报错产生原因 Cannot find module ‘vue/dist/vue.esm.js’ 我就是按照官网执行了初始化命令初始化的时候没报错结果一执行下一步 npm run storybook 就出现了此问题、解决方法后来搜谷歌地址：https://github.c

【Eelectron-vue】构建桌面应用（22）- linux下找不到net模块Cannot find module ‘../net‘

chenqk_123的专栏

01-05

1088

前面的文章提到了使用electron-vue构建桌面应用，已完成window下的开发，部署，发布。最近需要搞一下支持Linux系统。由于electron，vue都是跨平台的，所以直接将代码移植到linux下，但是发现在项目跑起来的时候却提示Can not find modules ../net 一时摸不着头脑，因为这玩意没有明确的提示是什么地方缺少了net模块。是虚拟机，是ilnux系统，还是electron-vue项目。 ...

Vue项目启动报错 error:cannot find module......

weixin_49709449的博客

12-26

1万+

2、执行清除缓存命令 npm cache clean或使用强制清除命令 npm cache clean --force；如果还报错，尝试删除package-lock.json文件；1、删掉存放模块的文件夹node_module；3、执行npm install，重新安装模块；4、npm run dev重启就可以了。错误的原因：无法找到某个模块。

Vue项目启动报错 error:cannot find module xxx

热门推荐

Mrlujiao_code的博客

10-22

2万+

原因：无法找到项目依赖的某个模块解决办法： 1、删掉存放模块的文件夹node_module； 2、执行清除缓存命令 npm cache clean；如果报错，使用强制清除npm cache clean --force；如果还报错，删除package-lock.json文件； 3、重新安装模块，npm install；（会重新自动生成package-lock.json文件）然后npm run dev重启就可以了。 ...

精选资源

解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题

01-21

补充知识：vue在npm run dev时报错Error: Cannot find module ‘xxx‘ 今天在做项目时出现了下面这个错误，找了很多博客，都说改一下代码写法就行了。不过视情况而定，有点时候有些代码改起来很麻烦，千丝万缕的关系...

精选资源

【报错问题】Vue 运行时提示 Error: Cannot find module ‘chalk’

01-07

运行 'npm run build' 时，提示错误 Error: Cannot find module 'chalk' 三、解决办法 3.1、根据上诉提示，其实已经告诉了问题来源，本地没有 node_modules 包，需要先运行命令 npm install 进行安装 npm install...

vue3创建新项目报错：Cannot find module ‘xxx‘

weixin_52020362的博客

06-15

2176

Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

解决Vue项目中的“Cannot find module ‘vue-template-compiler‘”错误

Sun_blog

09-18

1万+

在Vue项目中遇到“Cannot find module ‘vue-template-compiler’”错误时，我们可以通过安装vue-template-compiler模块、检查Vue版本、清除缓存并重新安装依赖、检查webpack配置以及检查其他依赖模块等方法来解决问题。希望本文对你解决这个错误有所帮助！

vue路由报错Cannot find module ‘xxx‘

ㅤㅤㅤㅤ

03-04

4376

今天改了一个前端项目，路由是由后端动态生成的，发现部署到服务器上面是正常的，而本地测试的时候出现报错，路由跳转不了，而且报错信息只有一个找不到模块，检查了一下配置确定也没问题，让同事运行了一下发现他可以正常运行，我就怀疑是不是什么版本出现的问题，后面就在路由代码中一步一步排查，总算找到了问题。。。先上报错信息: 在控制台输出了一下生成路由的信息，发现component这个key返回的竟然是一个空方法，所以才会报错找不到模块我们可以看见生成路由的时候是经过特殊处理的，loadView(r.

错误消息 “Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to a

hhhxyyyzz的博客

01-15

3109

你可以检查你的项目的 tsconfig.json 或者 webpack 的配置文件中关于模块解析的配置选项，确保这些选项已经正确设置。如果你使用的是 TypeScript，你可以尝试设置 “moduleResolution” 选项为 “node”，或者通过添加路径别名到 “paths” 选项来解决这个问题。这个命令将列出你项目中已安装的 Vue 模块，如果 Vue 模块已经安装，你将能够在列表中看到它的版本号和所在路径。请确保你的设置是正确的，并按照你的项目的实际情况进行修改。

Vite 初始化 Vue3 项目问题 Cannot find module ‘vue‘.

renran__的博客

06-20

966

今天使用vive脚手架创建了个vue3项目，导入vue模块时发现报了个”Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?“错误这个错误是由于找不到名为‘vue'模块，原因是因为vue3 库入口文件通过 commonjs 规范导出。

Cannot find module ‘vue‘ or its corresponding type declarations

qq_43225508的博客

04-11

1016

在使用vue3+vite创建新的工程时，在新增.vue文件时会出现Cannot find module 'vue'这个错误。只需要我们在项目中的.d.ts文件中添加以下代码即可。

报错：Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘, or to add

小卡拉米的博客

01-24

2675

报错：Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add

Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘, or to add ali

范天缘的博客

04-21

5862

把tsconfig.json配置项moduleResolution："bundler"改为 moduleResolution："node"就可以了。vue3+vite项目引入vue报错。

vue3+ts+vite,提示找不到.vue文件（cannot find module）

lengxiaoying的博客

09-09

1822

找到vite-env.d.ts文件添加以下代码。

Cannot find module vue/compiler-sfc

风烟

08-29

2706

我的vue版本是2.5，但是我的vue-loader版本升级到了vue-loader：17.3.0。经查，原来是vue2不能工作在vue-loader17以上，需要降到。

Vue项目启动报错：Cannot find module webpack-dev-server.js

最新发布

11-04

<think>根据提供的引用内容，用户的问题是在Vue项目启动时报错" Cannot find module webpack-dev-server.js"。需要结合三条引用信息来提供解决方案。分析引用内容： 1. 引用[1]提到两种方案：使用新命令`webpack serve`或降低webpack-cli版本。 2. 引用[2]展示了一个package.json的配置片段，其中dev脚本使用的是`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`，并显示项目依赖的webpack-dev-server版本为^2.9.1。 3. 引用[3]建议安装指定版本的webpack和webpack-dev-server（webpack@3.8.0和webpack-dev-server@2.9.7）。根据以上信息，可以推断错误通常是由于webpack和webpack-dev-server版本不兼容或配置问题导致。具体解决步骤如下： **解决方案：** 1. **检查依赖版本兼容性（重点）** 确保webpack、webpack-cli和webpack-dev-server的版本兼容。在Vue项目中，常见兼容版本组合： - webpack@3.x + webpack-dev-server@2.x (如引用[3]的方案) - webpack@4.x/5.x + webpack-dev-server@3.x/4.x（此时需使用`webpack serve`命令） 2. **更新启动命令（推荐）** 如果项目使用的是较新的webpack-dev-server（v3+），应将package.json中的dev脚本修改为： ```json "dev": "webpack serve --inline --progress --config build/webpack.dev.conf.js" ``` 注意：新版本中`webpack-dev-server`命令已被`webpack serve`取代（引用[1]的方案1）。 3. **降级依赖版本（兼容旧项目）** 若项目依赖旧版Vue（如vue@2.x），可尝试安装指定版本： ```bash npm install webpack@3.8.0 webpack-dev-server@2.9.7 --save-dev ``` 或通过package.json指定版本后重装依赖： ```json "devDependencies": { "webpack": "3.8.0", "webpack-dev-server": "2.9.7" } ``` 然后执行`npm install`（引用[3]的方案）。 4. **检查配置文件路径** 确认`build/webpack.dev.conf.js`文件是否存在（引用[2]的路径），若文件缺失需重建或从模板项目复制。 5. **清理缓存** 执行`npm cache clean --force`后重新安装依赖（`npm install`）。 **操作流程图解：** ```mermaid graph TD A[启动报错 Cannot find module webpack-dev-server.js] --> B{检查webpack版本} B -->|webpack v4+| C[使用命令 webpack serve] B -->|webpack v3| D[安装 webpack-dev-server@2.x] C --> E[修改package.json的dev脚本] D --> F[指定兼容版本并重装] E --> G[重新启动项目] F --> G G --> H[问题解决] ``` §§相关问题§§ 1. 如何检查项目中webpack和webpack-dev-server的版本？ 2. 为什么新版本webpack-dev-server要改用`webpack serve`命令？ 3. Vue项目中webpack配置文件的常见结构是怎样的？ </think>### Vue项目启动报错" Cannot find module webpack-dev-server.js"的解决方案根据您提供的引用信息和常见Vue项目实践，该错误通常由**版本兼容性问题**或**配置文件路径错误**导致。以下是具体解决步骤： #### ✅ 解决方案1：更新启动命令（推荐） 1. 修改`package.json`中的dev脚本： ```json "scripts": { // 旧命令（可能报错）： // "dev": "webpack-dev-server --config build/webpack.dev.conf.js" // 新命令（兼容webpack4/5）： "dev": "webpack serve --config build/webpack.dev.conf.js" } ``` **原因**：webpack-dev-server v3+已弃用原命令，改用`webpack serve`[^1] #### ✅ 解决方案2：版本降级（兼容旧项目） ```bash # 安装指定兼容版本 npm install webpack@4.44.2 webpack-dev-server@3.11.0 webpack-cli@3.3.12 --save-dev # 或使用引用[3]的版本（Vue2项目适用） npm install webpack@3.8.0 webpack-dev-server@2.9.7 --save-dev ``` **注意**：检查`package.json`中Vue版本： - Vue 2.x 建议用webpack 3/4 - Vue 3.x 需用webpack 5 #### ✅ 解决方案3：配置文件修复 1. 确认配置文件路径存在： ```bash ls build/webpack.dev.conf.js # 检查文件是否存在 ``` 2. 若文件缺失，从官方模板恢复： ```bash cp node_modules/@vue/cli-service/webpack.config.js build/webpack.dev.conf.js ``` #### ✅ 解决方案4：依赖清理与重装 ```bash # 1. 清除缓存 npm cache clean --force # 2. 删除node_modules和lock文件 rm -rf node_modules package-lock.json # 3. 重新安装 npm install ``` #### 💻 操作验证流程： ```mermaid graph TD A[启动报错] --> B{检查webpack版本} B -->|v4+| C[改用webpack serve] B -->|v3| D[降级webpack-dev-server] C --> E[重新启动] D --> E E -->|仍报错| F[检查配置文件路径] F -->|文件存在| G[清理依赖重装] F -->|文件缺失| H[恢复配置文件] ``` ### 常见原因总结 | 原因 | 发生场景 | 解决方式 | |---------------------|--------------------------|-----------------------| | 命令过时 | webpack-dev-server ≥3.0 | 改用`webpack serve` | | 版本冲突 | Vue2项目升级依赖后 | 降级到webpack 3/4 | | 配置文件路径错误 | 自定义构建配置 | 检查路径或恢复默认配置 | | 依赖安装不完整 | 删除了node_modules | 清理缓存后重装 | > **提示**：Vue CLI创建的项目建议使用`vue-cli-service serve`启动（无需直接调用webpack-dev-server）[^2]