Vue/cilインストール時のcommand not found: vueを解決する!Mac編

Vue.js

いろいろなサイトを参考に試みましたが、どれもうまくいかず自分の覚えとして記録しておきます。

でグローバルにインストールします。

下記のようになり、気になるのが、ところどころにエラーが発生していますが、最後のほうを見てみるとちゃんとインストールされているみたいです。

$ npm install -g @vue/cli@3.5.0
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
/usr/local/Cellar/node/13.6.0/bin/vue -> /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/bin/vue.js
> fsevents@1.2.13 install /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/node_modules/fsevents
> node install.jsNo receipt for ‘com.apple.pkg.CLTools_Executables’ found at ‘/’.No receipt for ‘com.apple.pkg.DeveloperToolsCLILeo’ found at ‘/’.No receipt for ‘com.apple.pkg.DeveloperToolsCLI’ found at ‘/’.gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/shinichi-ito/.nodebrew/node/v13.8.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:321:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command “/usr/local/Cellar/node/13.6.0/bin/node” “/Users/shinichi-ito/.nodebrew/node/v13.8.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js” “rebuild”
gyp ERR! cwd /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/node_modules/fsevents
gyp ERR! node -v v13.6.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok> core-js@3.6.5 postinstall /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/node_modules/core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> @apollo/protobufjs@1.0.4 postinstall /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/node_modules/@apollo/protobufjs
> node scripts/postinstall

> nodemon@1.19.4 postinstall /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate

> ejs@2.7.4 postinstall /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

+ @vue/cli@3.5.0
added 708 packages from 564 contributors in 32.23s

そこで心配なのでちゃんとインストールされているか確認するために

を実行すると

zsh: command not found: vue

 

原因はパスが通ってないとのことです。

 

では、ここから事細かくパスを通す方法を解説していきます。

まず確認するのが、どこにインストールされたのかを確認します。

 

インストール時の表示を再度見てください。

私のケースは下記です。(一部抜粋)

$ npm install -g @vue/cli@3.5.0
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
/usr/local/Cellar/node/13.6.0/bin/vue -> /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/bin/vue.js
> fsevents@1.2.13 install /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/node_modules/fsevents
> node install.js
No receipt for ‘com.apple.pkg.CLTools_Executables’ found at ‘/’.

上記の中の赤マーカーの部分が大事です。

/usr/local/Cellar/node/13.6.0/bin/vue -> /usr/local/Cellar/node/13.6.0/lib/node_modules/@vue/cli/bin/vue.js

さらにこの中で必要な部分は「->」で区切られた前半部分の最後のvueを除いた部分です。

つまりこれです。

/usr/local/Cellar/node/13.6.0/bin

 

実際に「/usr/local/Cellar/node/13.6.0/bin」

の中を覗いてみましょう。私のケースはこんな感じでした。

 

では、これをパスに通します。

ちなみに私のケースでのエラー表示は

zsh: command not found: vue

ですが

-bash: vue: command not found

というエラーのケースでも方法は同じですので、一部読み替えて行ってみてください。

 

ではターミナルを開いて

「cd」

「ls -a」

とコマンドを打ちます。

そうすると私のケースでは「.zshrc」ファイルが見つかります。

-bash: vue: command not found

というエラーのケースでは「.bash_profile」と読み替えてください。

ファイルが有るのが確認できたら、そのファイルを編集していきます。

私の場合はvimで編集しました。

をターミナルに打ち込みます。

 

そして下記のコードを書き込みます。

保存して下記をターミナルに打ち込みます。

または

で設定を反映させます。

これで行けるはずです。

再度

無事表示パスを通すことができました。

コメント

タイトルとURLをコピーしました