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

网络投稿 02-07 6091

一、问题

二、无需配置直接运行.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

四、总结

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

希望对你有帮助！

如有错误，欢迎指正！