无法运行“vue-cli-service serve” [vue 3]

3

问题

我试图更新一些包,运行了ncu -u后,我运行了npm install来应用新的更新,但是它无法工作。似乎出现了与eslint有关的问题???虽然我尝试复制这个问题,以便在此处发布错误,但我似乎无法得到它,但如果我记得正确,我必须执行npm install --legacy-peer-deps。无论如何,一旦我应用它,它就会安装,但是一旦我尝试运行npm run serve,就会出现一个错误。

我尝试过的方法

我已经检查了每个包的版本,它们都更新到最新版本。我已删除了"package-lock.json"和"node_modules"并重新安装它们。我很困惑它可能是什么问题。我在其他一些stackoverflow帖子上查找了一些清除缓存的信息,但那也没有起作用。

控制台(运行npm run serve时)

PS C:\Users\vdcam\Documents\GitHub\project-cc> npm run serve

> project-cc@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\cache-loader\\dist\\cjs.js",
      "options": {
        "cacheDirectory": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\.cache\\babel-loader",
        "cacheIdentifier": "39d06afa"
      },
      "ident": "clonedRuleSet-38.use[0]"
    },
    {
      "loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\babel-loader\\lib\\index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in 
{
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\cache-loader\\dist\\cjs.js",
      "options": {
        "cacheDirectory": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\.cache\\babel-loader",
        "cacheIdentifier": "39d06afa"
      },
      "ident": "clonedRuleSet-38.use[0]"
    },
    {
      "loader": "C:\\Users\\vdcam\\Documents\\GitHub\\project-cc\\node_modules\\babel-loader\\lib\\index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}
    at checkResourceSource (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
    at Function.normalizeRule (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
    at C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:109:17)
    at new RuleSet (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:104:24)
    at new NormalModuleFactory (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:636:31)
    at Compiler.newCompilationParams (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:653:30)
    at Compiler.compile (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:661:23)
    at C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._go (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\Watching.js:41:32)
    at C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\Watching.js:33:9
    at Compiler.readRecords (C:\Users\vdcam\Documents\GitHub\project-cc\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:529:11)
npm ERR! code 1
npm ERR! path C:\Users\vdcam\Documents\GitHub\project-cc
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c vue-cli-service serve

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\vdcam\AppData\Local\npm-cache\_logs\2021-03-24T03_03_44_891Z-debug.log      

调试日志(“npm run serve”)

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli   'C:\\Users\\vdcam\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'run',
0 verbose cli   'serve'
0 verbose cli ]
1 info using npm@7.7.0
2 info using node@v12.16.1
3 timing npm:load:whichnode Completed in 2ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Users\vdcam\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 3ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:C:\Users\vdcam\Documents\GitHub\project-cc\.npmrc Completed in 0ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\vdcam\.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\vdcam\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setEnvs Completed in 1ms
17 timing config:load Completed in 8ms
18 timing npm:load:configload Completed in 8ms
19 timing npm:load:setTitle Completed in 0ms
20 timing npm:load:setupLog Completed in 2ms
21 timing npm:load:cleanupLog Completed in 2ms
22 timing npm:load:configScope Completed in 0ms
23 timing npm:load:projectScope Completed in 0ms
24 timing npm:load Completed in 14ms
25 timing config:load:flatten Completed in 3ms
26 timing command:run Completed in 4496ms
27 verbose stack Error: command failed
27 verbose stack     at ChildProcess.<anonymous> (C:\Users\vdcam\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\promise-spawn\index.js:64:27)
27 verbose stack     at ChildProcess.emit (events.js:311:20)
27 verbose stack     at maybeClose (internal/child_process.js:1021:16)
27 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
28 verbose pkgid project-cc@0.1.0
29 verbose cwd C:\Users\vdcam\Documents\GitHub\project-cc
30 verbose Windows_NT 10.0.18363
31 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\vdcam\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
32 verbose node v12.16.1
33 verbose npm  v7.7.0
34 error code 1
35 error path C:\Users\vdcam\Documents\GitHub\project-cc
36 error command failed
37 error command C:\WINDOWS\system32\cmd.exe /d /s /c vue-cli-service serve
38 verbose exit 1

非常感谢您的帮助!!! 谢谢!


当然!这是代码库链接!代码库链接(请注意,代码库可能不是最新的,因为我最近进行了一些更改) - Victor
2个回答

5
一些问题:
- 你的项目依赖于vue-cli-service 4.x(只使用Webpack 4)和webpack 5。对于Webpack 5,需要vue-cli-service 5.x。请注意,还需要@babel/eslint-parser,并且您必须配置parserOptions.parser以匹配。请参见下面的package.json。 - 不需要在dev dependency中添加webpack、webpack-cli或webpack-bundle-analyzer,因为vue-cli-service已经依赖于webpack和webpack-bundle-analyzer(它们会通过传递引入),并且在你的项目中不使用webpack-cli。
这些依赖项应该可以解决问题:
// package.json
{
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/eslint-parser": "^7.12.1",
    "@vue/cli-plugin-babel": "~5.0.0-alpha.7",
    "@vue/cli-plugin-eslint": "~5.0.0-alpha.7",
    "@vue/cli-plugin-router": "~5.0.0-alpha.7",
    "@vue/cli-service": "~5.0.0-alpha.7",
    "@vue/compiler-sfc": "^3.0.7",
    "eslint": "^7.22.0",
    "eslint-plugin-vue": "^7.8.0",
  },
  "eslintConfig": {
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
  },
  ...
}

GitHub PR


2
非常感谢您的付出,甚至提交了一个拉取请求。我不知道vue-cli-service捆绑了这些东西。这是非常有用的信息。谢谢! - Victor

2

修复这个问题的方法是恢复我的package-lock.json文件中的更改。

然后执行npm prune命令删除无用的软件包,再执行npm update命令更新到最新版本。


谢谢您的建议,我运行了npm prunenpm update,但最终还是遇到了我之前遇到的错误。快照链接 - Victor
请使用命令 npm cache clean --force 清除缓存后再尝试。 - Kaumadie Kariyawasam
好的,我已经运行了 npm cache clean --force 命令并且正常工作。不过当我运行 npm run serve 时,出现了这个错误。看起来与我的最初错误相似 SnapShot Link - Victor

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接