错误：找不到模块'vue-loader-v16 / package.json'

问题描述

我是vue.js的新手，只是来自react.js。起初我没有遇到vue loader面临的问题。但是从第二次开始，由于应用程序启动服务器而崩溃。

 npm run serve

> todo@0.1.0 serve /home/riyad/Desktop/todo_wedevs/todo
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'vue-loader-v16/package.json'
Error: Cannot find module 'vue-loader-v16/package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at Function.Module._load (internal/modules/cjs/loader.js:539:25)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at api.chainWebpack.webpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/config/base.js:114:23)
    at webpackChainFns.forEach.fn (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:40)
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:26)
    at Service.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todo@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the todo@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/riyad/.npm/_logs/2020-08-20T11_40_44_196Z-debug.log

我尝试了vue cli 3和2 ..，并安装了不同的vue-loader ..但是结果是相同的 我的babble.config.js文件->

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],plugins: [new VueLoaderPlugin()],};

package.json

{
  "name": "todo","version": "0.1.0","private": true,"scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
  },"dependencies": {
    "core-js": "^3.6.5","uuid": "^8.3.0","vue": "^3.0.0-0","vuex": "^4.0.0-0"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0-0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0-0","vue-loader": "^16.0.0-beta.3","vue-template-compiler": "^2.6.11"
  },"eslintConfig": {
    "root": true,"env": {
      "node": true
    },"extends": [
      "plugin:vue/vue3-essential","eslint:recommended"
    ],"parserOptions": {
      "parser": "babel-eslint"
    },"rules": {}
  },"browserslist": [
    "> 1%","last 2 versions","not dead"
  ]
}

日志->

0 info it worked if it ends with ok
1 verbose cli [ '/home/riyad/.nvm/versions/node/v11.10.1/bin/node',1 verbose cli   '/home/riyad/.nvm/versions/node/v11.10.1/bin/npm',1 verbose cli   'run',1 verbose cli   'serve' ]
2 info using npm@6.7.0
3 info using node@v11.10.1
4 verbose run-script [ 'preserve','serve','postserve' ]
5 info lifecycle todo@0.1.0~preserve: todo@0.1.0
6 info lifecycle todo@0.1.0~serve: todo@0.1.0
7 verbose lifecycle todo@0.1.0~serve: unsafe-perm in lifecycle true
8 verbose lifecycle todo@0.1.0~serve: PATH: /home/riyad/.nvm/versions/node/v11.10.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/riyad/Desktop/todo_wedevs/todo/node_modules/.bin:/home/riyad/.nvm/versions/node/v11.10.1/bin:/home/riyad/.local/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/lib/jvm/default/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl:/var/lib/snapd/snap/bin:/home/riyad/.yarn/bin
9 verbose lifecycle todo@0.1.0~serve: CWD: /home/riyad/Desktop/todo_wedevs/todo
10 silly lifecycle todo@0.1.0~serve: Args: [ '-c','vue-cli-service serve' ]
11 silly lifecycle todo@0.1.0~serve: Returned: code: 1  signal: null
12 info lifecycle todo@0.1.0~serve: Failed to exec serve script
13 verbose stack Error: todo@0.1.0 serve: `vue-cli-service serve`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/riyad/.nvm/versions/node/v11.10.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:197:13)
13 verbose stack     at ChildProcess.<anonymous> (/home/riyad/.nvm/versions/node/v11.10.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:197:13)
13 verbose stack     at maybeClose (internal/child_process.js:984:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
14 verbose pkgid todo@0.1.0
15 verbose cwd /home/riyad/Desktop/todo_wedevs/todo
16 verbose Linux 5.6.19-2-MANJARO
17 verbose argv "/home/riyad/.nvm/versions/node/v11.10.1/bin/node" "/home/riyad/.nvm/versions/node/v11.10.1/bin/npm" "run" "serve"
18 verbose node v11.10.1
19 verbose npm  v6.7.0
20 error code ELIFECYCLE
21 error errno 1
22 error todo@0.1.0 serve: `vue-cli-service serve`
22 error Exit status 1
23 error Failed at the todo@0.1.0 serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1,true ]

也建议我如何使用vuex和vue-router安全地设置项目

解决方法

将npm更新到高于6.9的版本并执行 npm i，这应该安装缺少的软件包 https://github.com/vuejs/vue-cli/pull/5718

npm install npm@latest -g（要更新npm）

,

尝试仅将pacakge安装到devDependencies：

npm i --save-dev vue-loader-v16

它帮助了我。

对于babble.config.js，您是说babel.config.js吗？ 无论如何，我认为您的babel.config.js应该就是这样：

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],};

为了保持package.json的整洁，您可以制作一个.eslintrc.js文件-只需从eslintConfig的{​​{1}}键中复制/粘贴数据即可。

,

我通过重新安装软件包解决了这个问题。首先你需要卸载它

npm uninstall vue-loader-v16

卸载完成后，重新安装

npm i vue-loader-v16

这似乎很明显，但它对我有用两次

,

对于其他人，如果其他答案不起作用，我发现我的 npm 版本需要更新。

,

实际上是将vue / cli从4.5.6降级到3.0.1起作用..它已将vue cli从3降级到了2 ...实际上vue cli 3是beta版....现在不应该使用3 ...我曾经降级的命令 您只需要要安装的特定版本。在我的情况下->

npm install -g @ vue / cli @ 3.0.1

,

编辑App.js >>转到文件路径：src / component / App.vue

导入此代码

// code returned from the main loader for 'source.vue'

// import the <template> block
import render from 'source.vue?vue&type=template'
// import the <script> block
import script from 'source.vue?vue&type=script'
export * from 'source.vue?vue&type=script'
// import <style> blocks
import 'source.vue?vue&type=style&index=1'

script.render = render
export default script

运行后

npm run serve

我希望解决此错误“找不到模块'vue-loader-v16 / package.json'”