Help us understand the problem. What is going on with this article?

Vue.js 環境構築時エラーの対処法   (npm install -g vue-cli)

More than 1 year has passed since last update.

はじめに

Vue.jsの環境構築をターミナルで実施した際に発生したエラーの対処法についてまとめた記事です。
環境構築時にnpmコマンド実施してvue-cli のパッケージをインストールする(以下コマンド参照)

npm install -g vue-cli

上のやり方をいろんな記事で紹介しているのですが、それがうまくいかなかった時の対処方法についてまとめました。

エラー文

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/fisherman0825/.npm/_logs/2019-01-29T14_00_50_007Z-debug.log

原因

エラーの内容を見た感じ、permission deniedとなっているのでnpmコマンドを実施する上での権限が足りていないのが原因。

実施したこと

①npmのディレクトリパスの確認

npmがどこのディレクトリを使っているのかを確認します。

$ npm config get prefix
/usr/local

②パーミッション変更

$ sudo chown -R $(whoami) $(npm config get prefix) / {lib/node_modules,bin,share}

ここでパスワードが求められるのでパスワード入れたら色々npmや他のディレクトリのパーミッションを有効にしていくのでしばらく待ちます。

再確認

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 22.001s

無事エラーが出ず、vue-cliのパッケージのインストールができました。

$ vue --version
2.9.6

最後にちゃんとvueコマンドが使えるかどうかバージョンの確認も行いました。

参考サイト

npmでパッケージをインストールする
npmでpermission deniedになった時の対処法[mac]

cube_3110
自動車大国である地元の愛知から脱却し、現在都内で働いているエンジニア。 エンジニア5年目に突入。 今は某SaaS開発会社でRails触ってます。 Twitterでも積極的に発信してるのでもし良かったら絡んでください。
https://vue-project-16285.firebaseapp.com
commew
ゆるく、つながる、たすけあう 困りごとの共有や相談、学習報告などを通して「ひとりで働いていても孤独ではない」空間へ
https://commew.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away