使用 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 ()
    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

四、总结

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

/*

希望对你有帮助！

如有错误，欢迎指正！

*/