環境

PC - Windows 10 Home node.js - 12.16.3 npm - 6.14.4

vueプロジェクト作成

まずはグローバルにvue-cliをインストール

> npm install -g @vue/cli

インストールを確認

> vue --version
@vue/cli 4.4.6

適当に作ったディレクトリでプロジェクト作成今回はvueprojectという名前で進めます。

> vue create .

いろいろ聞かれますが、とりあえずデフォルトで進めます。

  Successfully created project vueproject.
  Get started with the following commands:

 $ npm run serve

と出れば成功。言われた通り、サーバーを起動します。

> npm run serve

エラー発生

npm ERR! code ELIFECYCLE
npm ERR! vueproject@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vueproject@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!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-07-03T03_35_30_681Z-debug.log

vue-cli-serviceがおかしいらしいけど、よく分からないのでエラー文でググります。

解決

ググって発見。 https://teratail.com/questions/219324

プロジェクトディレクトリから下記を削除する - node_modules - package-lock.json

その後、モジュールを再インストール

> npm install

完了したら、サーバー起動

> npm run serve

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.107:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

起動確認。

http://localhost:8080/ にアクセスし、下記の画面が表示されたらOK。 FireShot Capture 002 - portfolio - localhost.png