web-dev-qa-db-ja.com

npm rundevコマンドがvuejsのhackernewsの例では機能しない

Vuejsのgithubからvue-hackernews-2.0の例を実行しようとしています repository

セットアップセクションでは、プロジェクトのインストール方法について説明します。

# install dependencies
npm install # or yarn

# serve in dev mode, with hot reload at localhost:8080
npm run dev

# build for production
npm run build

# serve in production mode
npm start

Npmインストールをしました。 server.jsでポートを8888に変更した後、コマンドラインで「npmrundev」と入力しました。

> vue-hackernews-2.0@ dev D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master
> node server

server started at localhost:8888


DONE  Compiled successfully in 16328ms                                                                                                                                                                                                                        1:02:18 PM


DONE  Compiled successfully in 17845ms                                                                                                                                                                                                                        1:02:19 PM


webpack built bd162a76119031a85eed in 17845ms

Localhost：8888に移動すると、1分間ロードしようとしますが、コンソールに何も表示されずに失敗します。

「npmrunbuild」と「npmstart」も試してみるべきだと思ったので、2つのコマンドも使用しました。 「npmrunbuild」はdistファイルを正常に作成しました。

しかし、「npm start」の後、次のエラーが発生します。

> vue-hackernews-2.0@ start D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master
> cross-env NODE_ENV=production node server

module.js:471
    throw err;
    ^

Error: Cannot find module './dist/vue-ssr-server-bundle.json'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\server.js:41:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn node ENOENT
    at notFoundError (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:11:11)
    at verifyENOENT (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:46:16)
    at ChildProcess.cp.emit (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:33:19)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Users\\212399486\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! vue-hackernews-2.0@ start: `cross-env NODE_ENV=production node server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-hackernews-2.0@ start script 'cross-env NODE_ENV=production node server'.
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 vue-hackernews-2.0 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production node server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vue-hackernews-2.0
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vue-hackernews-2.0
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\npm-debug.log

Distフォルダーのスクリーンショット：

enter image description here

package.jsonスクリプト：

"scripts": {
    "dev": "node server",
    "start": "cross-env NODE_ENV=production node server",
    "build": "rimraf dist && npm run build:client && npm run build:server",
    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
  },
javascriptnode.jsnpmwebpackvue.js
7
brainmassage

Node.js7以降が必要

なんとか問題なく動作させました。

$node -v
v8.3.0
$npm -v
5.3.0

デフォルトのポートを正常に変更します。

デフォルトのポートを変更するには、package.jsonスクリプトを編集する必要があります。

dev：cross-env PORT=8888 node server

開始：cross-env PORT=8888 NODE_ENV=production node server

次に、npm run devを実行します

> vue-hackernews-2.0@ dev /home/emx/so/vue-hackernews-2.0
> cross-env PORT=8888 node server

server started at localhost:8888
4
EMX

サポートされていないバージョンのノードを使用しています。 node v6.11.2へのエラーポイントは以下を参照してください。

 npm ERR! Windows_NT 6.1.7601
 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Users\\212399486\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
 npm ERR! node v6.11.2
 npm ERR! npm  v3.10.8

vue-hackernews-2.0にはNode.js 7+が必要です。ノードを7以降のバージョンにアップグレードすれば、問題はありません。また、npmバージョンを更新することをお勧めします。

手順が必要な場合は、ノードバージョンを更新する方法の詳細について、 この質問への回答 を参照してください。

0
Kalenda