vue3爬坑之项目启动报错Cannot find module ‘vue-loader-v16/package.json

最新推荐文章于 2022-11-04 13:41:32 发布
最新推荐文章于 2022-11-04 13:41:32 发布
阅读量7.1k 收藏 6
点赞数 6
分类专栏： vue 文章标签： vue vue3 debug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dyw3390199/article/details/114745076
版权

今天新建一个vue3项目准备写个电商项目的放大镜组件，npm run serve后直接报了个错
在这里插入图片描述
想着可能是缺少依赖，就执行npm i
在这里插入图片描述
继续跑，还是报错
在这里插入图片描述
去stackoverflow上找了下，发现有人也有这样的问题，有人提示用这样的方法可以解决问题：
在这里插入图片描述
stackoverflow原文链接

于是执行npm i --save-dev vue-loader-v16，搞定！
在这里插入图片描述

vue2/3 - 解决报错Error: Cannot find module ‘babel-plugin-import‘（vue2/vue3报错无babel-plugin-import模块详细解决教程
高级前端工程师
03-04 3794
vue，vue2，vue3，Error: Cannot find module 'babel-plugin-import'，vue报错找不到babel-plugin-import模块，babel-plugin-import，vue运行项目时出现报错，vue打包编译build提示报错，解决vue报错，如何解决在vue网页中出现报错，安装axios依然不行，执行npm install antd babel-plugin-import依然报错怎么办，安装了依然提示报错咋办，The package manager
vue2/3 - 报错Error：Cannot find module ‘body-parser‘ | Require stack（vue找不到模块“body-parser”，项目报错完美解决方案）
高级前端工程师
04-16 3236
vue2，vue3，vue body-parser，body-parser模块是什么，如何解决vue缺失body-parser模块，安装body-parser报错，vue启动报错，Error：Cannot find module 'body-parser'，找不到模块“body-parser”，npm run dev，npm run serve，运行项目出现错误，如何解决vue报错，vue报错怎么办，终端报错无法启动，详细解决教程，node_modules，重新安装依赖也不行，还是不行怎么办，vue 报错，
Cannot find module ‘vue-loader-v16/package.json‘
Zero
11-30 1537
原因在于使用npm安装依赖的时候vue-loader-v16有部分资源因为网络问题下载不下来，换成国内镜像下载cnpm 下载 先卸载vue-loader-v16依赖 npm uninstall vue-loader-v16 再使用cnpm安装vue-loader-v16依赖 cnpm i vue-loader-v16 就可以正常启动项目了 ...
vue-cli项目启动时“Cannot find module ‘vue-loader-v16/package.json”解决方案
桃花岛主的博客
05-11 859
一、卸载vue-loader-v16依赖 npm uninstall vue-loader-v16 二、用cnpm安装vue-loader-v16依赖 cnpm i vue-loader-v16 安装cnpm的方法：安装淘宝npm（cnpm） (1)输入以下命令：、 npm install -g cnpm --registry=https://registry.npm.taobao.org (2)输入cnpm -v输入是否正常， cnpm -v ...
vue3.0项目启动报错： Cannot find module ‘vue-loader-v16/package.json‘
friend_ship的博客
03-23 550
项目编译完成，执行npm run serve启动时，报以上错误，原因在于使用npm安装依赖的时候vue-loader-v16有部分资源未下载下来，解决方式： 第一步：先卸载未正确安装的vue-loader-v16 npm uninstall vue-loader-v16 第二步：通过国内淘宝镜像下载该依赖： cnpm install vue-loader-v16 如果没有安装cnpm，可以执行下面的命令，使用临时镜像： npm install vue-loader-v16 --regi..
vue-cli项目启动时出现Cannot find module ‘vue-loader-v16/package.json‘的问题
qq_39902343的博客
10-21 1万+
vue-cli项目启动时出现Cannot find module 'vue-loader-v16/package.json'的问题 使用vue-cli初始化项目之后启动项目出现了vue-loader-v16/package.json问题 参考了好几个博客都没有解决，但是给出了点思路，原因在于使用npm安装依赖的时候vue-loader-v16有部分资源需要科学上网才能下载下来，那我们换成国内镜像下载不久能解决了吗 先卸载vue-loader-v16依赖 npm uninstall vue-loader-
运行Vue项目时出现的错误：Error: Cannot find module ‘vue-loader-v16/package.json‘ 的解决方法
F14867的博客
11-04 3375
Vue项目运行出现Error: Cannot find module 'vue-loader-v16/package.json'错误解决方法
bug Error: Cannot find module ‘vue-loader-v16/package.json‘的解决办法
weixin_40945354的博客
03-03 2363
更新，命令如下，在 https://stackoverflow.com/questions/63504594/error-cannot-find-module-vue-loader-v16-package-json 查到 cnpm i --save-dev vue-loader-v16 ivyone@ivyonedeMacBook-Pro daily-cost % cnpm install ⠦ [12/17] Installing source-map@^0.6.1[vue-loader-v16@npm
vue3+ts报错Cannot find module ‘vue-loader-v16/package.json‘和‘fork-ts-checker-webpack-plugin-v5‘
weixin_48346852的博客
12-07 955
新建了一个vue3+ts的项目，把node-module删了之后重新install，再运行，发现报错了 Cannot find module ‘vue-loader-v16/package.json’ 需要在package.json里的devDependencies中加上 “vue-loader-v16”: “^16.0.0-beta.5.4” "devDependencies": { ... "vue-loader-v16": "^16.0.0-beta.5.4", ...
ERROR Error: Cannot find module ‘webpack/package.json‘
郭宝的博客
01-07 8141
背景： 在通过 npm run dev 运行一个Vue项目时出现了如下报错信息 C:\Users\Administrator\WebstormProjects\memorial>npm run dev vue-admin-template@4.1.0 dev C:\Users\Administrator\WebstormProjects\memorial vue-cli-service serve INFO Starting development server… ..
解决vue3.0 启动报错 :Cannot find module ‘vue-loader-v16/package.json‘
提莫拌一团蘑菇
04-08 4621
1. 项目报错截图： 2. 报错原因： 原因在于使用npm安装依赖的时候vue-loader-v16有部分资源需要科学上网才能下载下来，那我们换成国内镜像（cnpm）下载就可以解决了！！ 3. 步骤 （1）先卸载vue-loader-v16依赖 npm uninstall vue-loader-v16 （2）之后使用cnpm安装vue-loader-v16依赖 cnpm i vue-loader-v16 （3）再次启动项目，启动成功 如果我的解决方式对你...
Cannot find module ‘vue-loader-v16/package.json’和fork-ts-checker-webpack-plugin-v5报错解决
qq_40022256的博客
06-25 545
使用create 创建一个Vue3项目，立即报了一个错误： Cannot find module ‘vue-loader-v16/package.json’ 通过分别检查node、vue、vue/cli版本，不是版本低的问题 卸载该包重新安装： 运行如下代码： npm uninstall vue-loader-v16 npm i vue-loader-v16 当然也可以通过在package.json锁定版本号解决问题： devDependencies中加上 “vue-loader-v16”: “^1
vue3.0报错Error: Cannot find module ‘vue-loader-v16/package.json‘
weixin_44440116的博客
12-18 3884
使用vue-cli初始化项目,启动报错。 Error: Cannot find module 'vue-loader-v16/package.json' 解决： 卸载依赖： npm uninstall vue-loader-v16 重新安装依赖： cnpm i vue-loader-v16 安装成功就行了。
vue 3.0 项目报错 Error: Cannot find module ‘vue-loader-v16/package.json‘
weixin_38673922的博客
12-10 951
vue3.0启动提示Error: Cannot find module ‘vue-loader-v16/package.json‘ 1、卸载vue-loader-v16依赖 npm uninstall vue-loader-v16 2、重新安装vue-loader-v16依赖 cnpm i vue-loader-v16
vue-loader-v16/package.json报错
m0_50967270的博客
04-23 1194
vue3.0启动提示Error: Cannot find module ‘vue-loader-v16/package.json‘ node和vue升级到最新版本, 用npm安装依赖 别用cnpm, 完美解决
vue-cli项目启动时出现Cannot find module ‘vue-loader-v16/package.json‘
joey_hao的博客
09-02 554
vue-cli项目启动时出现Cannot find module ‘vue-loader-v16/package.json’,如下图： 出现原因： 使用npm安装依赖的时候vue-loader-v16有部分资源需要科学上网才能下载下来，所以这时候我们可以采用国内镜像下载就可以解决了 先卸载vue-loader-v16依赖 npm uninstall vue-loader-v16 之后使用cnpm安装vue-loader-v16依赖 cnpm i vue-loader-v16 然后问题就.
vue3.0报错：Cannot find module ‘vue-loader-v16/package.json‘的解决办法
weixin_41033048的博客
09-14 9132
使用命令cnpm -- install 代替 cnpm install来执行
vue3项目启动报错Cannot find module ‘vue-loader-v16/package.json
前端阿玉博客
07-21 1万+
遇到这个问题不要跟提示去下载缺少的依赖，可能你在npm安装包的时候丢失文件，操作如下 1.删除node_modules依赖包 2.使用 yarn 重新 下载依赖(未安装yarn的 先安装yarn执行命令 npm install -g yarn) 正常启动了... ...
npm install 报错没有匹配版本：No matching version found for
热门推荐
邪人君子的博客
03-17 12万+
第一种 问题描述 PS E:\myWork\AHNX_PC\paybank> npm install vue-drag-verify npm ERR! code ETARGET npm ERR! notarget No matching version found for vue-drag-verify@^4.7.0. npm ERR! notarget In most cases you ...
vue引入组件报错怎么解决
最新发布
03-16
<think>好的，我现在需要帮助用户解决在Vue项目中引入组件时出现的错误。用户提到了类似“Module is not installed”和“Cannot assign to read only property &#39;exports&#39;”等错误。首先，我要根据用户提供的引用信息来分析可能的原因和解决方法。 首先，引用[2]指出，当出现“Module is not installed”错误时，通常是因为模块或组件未正确安装。这可能包括npm安装失败、路径错误或缓存问题。我需要检查这些方面，比如确认是否运行了npm install，路径是否正确，以及是否需要清除缓存。 然后，引用[1]提到找不到模块&#39;stylus&#39;的情况，这说明依赖缺失也是一个常见问题。需要确保所有依赖项都已正确安装，尤其是第三方库或组件。 接下来，引用[4]中的错误“Cannot assign to read only property &#39;exports&#39;”通常与混合使用CommonJS的module.exports和ES6的import/export有关。这时候需要统一模块语法，或者调整Babel配置，可能需要使用@babel/plugin-transform-modules-commonjs插件。 另外，引用[3]建议参考社区和论坛，比如Vue.js中文社区或Stack Overflow，这可能帮助用户找到更多解决方案或确认问题是否常见。 综合这些信息，我需要分步骤整理解决方案，确保覆盖所有可能的原因，并提供具体的操作步骤，比如安装依赖、检查路径、清除缓存、统一模块语法等。同时，要提醒用户检查代码中的语法错误和配置是否正确，比如webpack或Babel的设置。此外，建议用户如果问题依旧，查阅官方文档或寻求社区帮助。 最后，生成相关问题时要围绕Vue组件引入的常见错误、依赖管理、模块语法冲突、构建工具配置等方面，确保问题具有针对性，能够帮助用户进一步理解和解决问题。</think>### Vue引入组件报错解决方案及原因分析 #### 一、模块未安装（最常见原因） 1. **检查组件路径** 确保组件路径正确，区分大小写（Linux服务器对大小写敏感）。 错误示例：`import MyComponent from &#39;@/components/mycomponent.vue&#39;` 正确示例：`import MyComponent from &#39;@/components/MyComponent.vue&#39;` 2. **重新安装依赖** 若使用第三方组件库（如ElementUI），执行： ```bash npm install 组件包名 --save # 示例：npm install element-ui --save ``` 3. **清除npm缓存** 当出现`npm ERR! code E404`等异常时： ```bash npm cache clean --force rm -rf node_modules npm install ``` #### 二、模块语法冲突（ES6/CommonJS混合使用） 1. **统一模块语法** ```javascript // 错误示例（混合使用） import _ from &#39;lodash&#39;; module.exports = { /*...*/ } // 正确方案（二选一） // 方案1：全用ES6 import _ from &#39;lodash&#39;; export default { /*...*/ } // 方案2：全用CommonJS const _ = require(&#39;lodash&#39;); module.exports = { /*...*/ } ``` 2. **配置Babel转换** 在`babel.config.js`中添加： ```javascript module.exports = { plugins: [&#39;@babel/plugin-transform-modules-commonjs&#39;] } ``` #### 三、Webpack配置问题 1. **检查文件扩展名配置** 在`vue.config.js`中添加： ```javascript module.exports = { configureWebpack: { resolve: { extensions: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;] } } } ``` 2. **检查loader配置** 确保已安装`vue-loader`： ```bash npm install vue-loader@15 --save-dev ``` #### 四、环境兼容性问题 1. **Node.js版本检查** 推荐使用LTS版本（如v14.x、v16.x），通过`.nvmrc`文件指定版本： ```bash node -v # 查看当前版本 echo "16.14.0" > .nvmrc ``` 2. **浏览器兼容处理** 在`package.json`中添加browserslist配置： ```json "browserslist": [ "> 1%", "last 2 versions", "not dead" ] ``` #### 五、特殊案例：Stylus相关错误 当出现`Cannot find module &#39;stylus&#39;`时： ```bash npm install stylus stylus-loader --save-dev ``` 同时检查`vue.config.js`是否包含： ```javascript module.exports = { css: { loaderOptions: { stylus: { preferPathResolver: &#39;webpack&#39; } } } } ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值