用于vue-cli的Webpack dev服务器:错误产生EACCES

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用于vue-cli的Webpack dev服务器:错误产生EACCES相关的知识,希望对你有一定的参考价值。

我的环境:

  • Centos 7通过VirtualBox(安装在Windows 7上)
  • 节点版本:6.10.3
  • NMP版本:3.10.10
  • 我是公司代理的幕后黑手

我用vue-cli初始化了一个新项目“vuetest”,现在我想运行一个webpack服务器。我使用以下命令:

npm run dev

这个命令相当于“webpack-dev-server --open --hot”,这是我的“package.json”文件来检查:

{
  "name": "vuetest",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.2.4",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

但是我收到以下错误:

> vuetest@1.0.0 dev /var/www/html/vuetest
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
internal/child_process.js:319
    throw errnoException(err, 'spawn');
    ^

Error: spawn EACCES
    at exports._errnoException (util.js:1018:11)
    at ChildProcess.spawn (internal/child_process.js:319:11)
    at Object.exports.spawn (child_process.js:378:9)
    at module.exports (/var/www/html/vuetest/node_modules/opn/index.js:75:24)
    at reportReadiness (/var/www/html/vuetest/node_modules/webpack-dev-server/bin/webpack-dev-server.js:424:3)
    at Server.<anonymous> (/var/www/html/vuetest/node_modules/webpack-dev-server/bin/webpack-dev-server.js:404:4)
    at Server.g (events.js:292:16)
    at emitNone (events.js:86:13)
    at Server.emit (events.js:185:7)
    at emitListeningNT (net.js:1284:10)

npm ERR! Linux 3.10.0-514.el7.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! vuetest@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuetest@1.0.0 dev script 'cross-env NODE_ENV=development webpack-dev-server --open --hot'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vuetest package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development webpack-dev-server --open --hot
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vuetest
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vuetest
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/html/vuetest/npm-debug.log

这是“npm-debug.log”文件的内容:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using npm@3.10.10
3 info using node@v6.10.3
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle vuetest@1.0.0~predev: vuetest@1.0.0
6 silly lifecycle vuetest@1.0.0~predev: no script for predev, continuing
7 info lifecycle vuetest@1.0.0~dev: vuetest@1.0.0
8 verbose lifecycle vuetest@1.0.0~dev: unsafe-perm in lifecycle true
9 verbose lifecycle vuetest@1.0.0~dev: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/var/www/html/vuetest/node_modules/.bin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/home/bdupre/.local/bin:/home/bdupre/bin
10 verbose lifecycle vuetest@1.0.0~dev: CWD: /var/www/html/vuetest
11 silly lifecycle vuetest@1.0.0~dev: Args: [ '-c',
11 silly lifecycle   'cross-env NODE_ENV=development webpack-dev-server --open --hot' ]
12 silly lifecycle vuetest@1.0.0~dev: Returned: code: 1  signal: null
13 info lifecycle vuetest@1.0.0~dev: Failed to exec dev script
14 verbose stack Error: vuetest@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:886:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid vuetest@1.0.0
16 verbose cwd /var/www/html/vuetest
17 error Linux 3.10.0-514.el7.x86_64
18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
19 error node v6.10.3
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error vuetest@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
22 error Exit status 1
23 error Failed at the vuetest@1.0.0 dev script 'cross-env NODE_ENV=development webpack-dev-server --open --hot'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the vuetest package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     cross-env NODE_ENV=development webpack-dev-server --open --hot
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs vuetest
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls vuetest
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

有谁知道如何解决它吗?

答案

我找到了解决方案。在“package.json”文件中,我替换了:

"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"

这样 :

"dev": "cross-env NODE_ENV=development webpack-dev-server --port 8080 --hot --host 0.0.0.0"

现在一切正常,我的服务器正常启动。

另一答案

正如Emil所说,这是opn模块的问题,因为xdg-open不可执行。我在使用vue-cli生成的项目中遇到了同样的问题,该项目使用的是opn 5.1.0。

简单地做chmod +x node_modules/opn/xdg-open就能解决这个问题。但每次更新节点模块时,此更改都将丢失。

我最后评论了在build / dev-server.js中打开的调用:

if(autoOpenBrowser && process.env.NODE_ENV!=='testing'){

 //opn(uri)  

}

并在http://localhost:8080上手动打开我的浏览器

另一答案

node_modules / opn / xdg-open不可执行,如果你在linux上这就是opn / index.js第75行失败的那个

或者添加这个

    console.log(cmd, args, cpOpts);

在node_modules / opn / index.js中的第75行之前,确切地看到哪个命令失败

另一答案

你能检查你的开发服务器的端口8080是否已被使用?只需在浏览器中点击http://localhost:8080或更改webpack.config.js中的端口,然后重试。我有一个类似的问题,也许就是这样。

另一答案

检查跟踪日志,这个问题发生在模块opn中,完全在index.js的第75行

Error: spawn EACCES at exports._errnoException (util.js:1018:11) at ChildProcess.spawn (internal/child_process.js:319:11) at Object.exports.spawn (child_process.js:378:9) at module.exports (/var/www/html/vuetest/node_modules/opn/index.js:75:24)

看着那个文件,我们看到:

 50         } else {
 51                 if (opts.app) {
 52                         cmd = opts.app;
 53                 } else {
 54                         cmd = path.join(__dirname, 'xdg-open');
 55                 }
 56 
 57                 if (appArgs.length > 0) {
 58                         args = args.concat(appArgs);
 59                 }
 60 
 61                 if (!opts.wait) {
 62                         // xdg-open will block the process unless
 63                         // stdio is ignored even if it's unref'd
 64                         cpOpts.stdio = 'ignore';
 65                 }
 66         }
 67 
 68         args.push(target);
 69 
 70         if (process.platform === 'darwin' && appArgs.length > 0) {
 71                 args.push('--args');
 72                 args = args.concat(appArgs);
 73         }
 74 
 75         var cp = childProcess.spawn(cmd, args, cpOpts);

可能node正在尝试运行xdg-open这是一个bash脚本,因此需要执行权限。

试试:

chmod a+x xdg-open

或者,如果您在项目的根目录中:

chmod a+x node_modules/opn/xdg-open

PS:通常所有这些文件都具有正确的权限。在一个deseperate情况下,你总是可以删除目录node_modules并再次运行npm install

以上是关于用于vue-cli的Webpack dev服务器:错误产生EACCES的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

手撕vue-cli配置——webpack.dev.conf.js篇

vue-cli#2.0 webpack 配置分析

vue-cli结构分析

vue-cli搭建项目模拟后台接口数据,webpack-dev-conf.js文件配置

vue-cli加载不到dev-server.js的解决办法