使用 vue cli 的 vue serve命令单独运行.vue文件报错: Error: Cannot find module ‘@vue/compiler-sfc/package.json‘

目录

一、问题

二、无需配置直接运行.vue文件

三、解决

1.详细错误

四、总结


一、问题

根据vue cli官方文档 https://cli.vuejs.org/zh/guide/prototyping.html学习无需配置直接运行.vue文件时,一直报错  https://cli.vuejs.org/zh/guide/prototyping.html

二、无需配置直接运行.vue文件

1.安装vue脚手架

npm install -g @vue/cli

 2.使用下面的命令检查是否安装成功:

vue --version

3.全局安装支持零配置运行 .vue文件的扩展

npm install -g @vue/cli-service-global

4.新建一个app.vue文件

5.使用下面的命令初始化项目

npm init

6.运行app.vue文件

vue serve app.vue

官方文档文档的介绍到此为止,但是我运行的时候一直报错,详细错误见  三、解决。

7.实际运行时,还会报错:

 添加vue模块:解决上述问题

npm install --save vue

 

三、解决

1.详细错误

PS D:\work\vueLearning\comen-test> vue serve app.vue
 INFO  Starting development server...
(node:8644) UnhandledPromiseRejectionWarning: Error: Cannot find module '@vue/compiler-sfc/package.json'
Require stack:
- C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\config\base.js
- C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js
- C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\index.js
- C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\loadCommand.js
- C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\config\base.js:115:30
    at C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js:236:40
 at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js:236:26)
    at Service.resolveWebpackConfig (C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (C:\Users\liyanlan\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:8644) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:8644) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

2.上面的错误主要是说 找不到  '@vue/compiler-sfc/package.json' 这个模块。

3.去node_modules中看了这个模块在且有package.json这个文件。不清楚为什么找不到。

4.看了其他博文,卸载重装了这个模块(npm i @vue/compiler-sfc)依然没有用,尝试了安装其他模块也没有用。

5.最后,使用全局安装 命令安装  @vue/compiler-sfc这个模块,问题终于解决了,成功运行了。

npm i -g @vue/compiler-sfc

四、总结

        我也不清楚为什么要全局安装 这个模块,才能在编译运行时被识别。如果有人知道,欢迎在评论区评论,谢谢!

/*

希望对你有帮助!

如有错误,欢迎指正!

*/

  • 12
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值