vuetify使用前のローカルサーバ立ち上げについて

Question

#実現したいこと
Ruby on Railsにvuetifyを
$ vue add vuetify
で無事インストール出来たので、
$ npm run serve を実行し、vuetifyを使用できる状態にしたいです。

#入力したコマンド

$ npm run serve

#エラーメッセージ

npm ERR! missing script: serve

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2020-10-16T11_06_08_951Z-debug.log

#参考にしたサイト
stack overflow: How to fix missing script : serve?

このサイトの内容だとコマンドを実行しているディレクトリが違うということのようですが、package.jsonの親ディレクトリで実行しているので、そこは問題ないのかなと思っています。。

Comments

[stakizawa]

package.jsonの親ディレクトリと言うのは、package.jsonがあるディレクトリのことを指していますか？

ディレクトリ構成と実際にどのディレクトリでサーバーを起動しているのか記載していただけると助かります。

[Takum]

[vagrant@localhost worry]でnpm run serveを入力しています。worryがアプリケーションのルートディレクトリになっています。

以下のコマンドを入力すると、package.json等 が出てきます。（他のディレクトリやファイルは量が多いため省略してます）
[vagrant@localhost worry]$ ls -a
package.json

[stakizawa]

お手数ですが、package.jsonの中身も記載していただくことは可能ですか？

おそらく、なにもいじってなければ問題ないかと思いますが…

[Takum]

下記に記載させていただきました。（一応なにもいじっていないです！）
あと、今回railsの開発を進めている最中にvue.jsを使用することにしたので、rails new 〜と最初に入力しており、vue create 〜というようなものを作成していないので、それが原因なのでしょうか。

{
"name": "portfolio",
"private": true,
"dependencies": {
"vuetify": "^2.2.11"
},
"devDependencies": {
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vuetify-loader": "^1.3.0"
}
}

Answer 1

vue create 〜というようなものを作成していないので、それが原因なのでしょうか。

これが原因で、package.jsonの内容に漏れがあるようですね。

  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vuetify": "^2.2.11"
  },

package.jsonに上記の内容を追記してみてはいかがでしょうか？

Comments

[Takum]

ご指摘どおり追記してみましたが、、
{
"name": "portfolio",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vuetify": "^2.2.11"
},
"devDependencies": {
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vuetify-loader": "^1.3.0"
}

エラーが増えてしまいました、、
npm ERR! code EJSONPARSE
npm ERR! file /home/vagrant/work/worry/package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected string in JSON at position 249 while parsing '{
npm ERR! JSON.parse "name": "portfolio",
npm ERR! JSON.parse "private": tr'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2020-10-16T12_42_08_345Z-debug.log
[vagrant@localhost worry]$ npm run serve
npm ERR! code EJSONPARSE
npm ERR! file /home/vagrant/work/worry/package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected end of JSON input while parsing near '...oader": "^1.3.0"
npm ERR! JSON.parse }
npm ERR! JSON.parse '
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2020-10-16T12_43_29_964Z-debug.log

[stakizawa]

「}」が一つ足りないですね

{
"name": "portfolio",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vuetify": "^2.2.11"
},
"devDependencies": {
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vuetify-loader": "^1.3.0"
}
}

これでどうでしょう

[Takum]

エラーの内容が少し変わりましたが、まだ何か違うみたいです。

[vagrant@localhost worry]$ npm run serve

> portfolio@ serve /home/vagrant/work/worry
> vue-cli-service serve

sh: vue-cli-service: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! portfolio@ serve: `vue-cli-service serve`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the portfolio@ 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/vagrant/.npm/_logs/2020-10-16T12_53_07_681Z-debug.log

[stakizawa]

そしたら、一旦確認していただきたいのですが、node_modules/@vue/cli-serviceがあるか確認していただいてもいいですか？？

お手数おかけします。

[Takum]

こちらこそお付き合いありがとうございます、、
node_modulesはあるのですが、@vue以降のファイルがなさそうです。

[vagrant@localhost worry]$ ls -a
. .bundle .env .gitignore Gemfile README.md app config db log package.json src test vendor vue_cli_test
.. .byebug_history .git Capfile Gemfile.lock Rakefile bin config.ru lib node_modules public storage tmp vue.config.js
[vagrant@localhost worry]$ cd node_modules/
[vagrant@localhost node_modules]$ ls -a
. anymatch braces fast-deep-equal glob is-binary-path isobject minimatch path-is-absolute rechoir semver vuetify
.. balanced-match chokidar fast-json-stable-stringify glob-parent is-extglob json-schema-traverse minimist path-parse resolve shallow-clone vuetify-loader
@types big.js clone-deep file-loader inflight is-glob json5 neo-async picomatch sass shelljs wrappy
ajv binary-extensions concat-map fill-range inherits is-number kind-of normalize-path punycode sass-loader to-regex-range
ajv-keywords brace-expansion emojis-list fs.realpath interpret is-plain-object loader-utils once readdirp schema-utils uri-js

[stakizawa]

なるほど。私もvue createコマンドを使用しないで環境構築をしたことがないので、あくまで憶測になってしまうのですが、おそらくvue createコマンドを実行するといろいろ質問された後に、プロジェクトが作成されるのですが、その際にvueCLIが必要な依存関係のライブラリ等をインストールしてくれるのでしょう。

なので、手動でそれらのモジュール(今回エラーを吐いているvue-cli-serviceなどなど)をインストールすればこの問題は解決するかと思いますが、vue-cli-serviceだけでなく他にも色々モジュールが必要かと思われます。

ここまで、試させておいてあれですが、vue createコマンドを実行したほうが、割とすぐにサーバの立ち上げまで行けるのではないかなと思いますね...

[Takum]

そういうことなんですね！
であれば、一度vue createでやってみます！もし分かればこちらに追記しようと思います。
前回の質問からお付き合いいただいてありがとうございました。

[stakizawa]

ちなみに補足ですが、npm run serveの[serve]の部分が、
package.jsonのscriptsのserveを実行するという意味になります。

今回でいうと、vue-cli-service serveを実行となりますね。
その際に、vue-cli-serviceがないので、エラーを吐いたということになります。

なので、このvue-cli-serviceの部分を別のスクリプトでサーバを立てるコマンドを記述しておけば、サーバ自体は立つと思われます。

参考記事
https://qiita.com/yd_niku/items/7bf637c16e14874f1698