最近Vue.jsを勉強し始めたのだけど、まさか開発環境構築で躓くとは・・・!
ということで、同じことになる人もいると思うので解決までの流れをメモしておこうと思います。
勉強自体は「Vue.js 3 超入門」という書籍で勉強しています。
node.js等のインストールの流れは、本の通りに進めています。
Vue3で「Vue CLI」のインストールでエラー発生!解決まで
開発環境
・M1 iMac, 2021
・OS:macOS Monterey バージョン12.2
・node.js v16.13.2
・npm v8.1.2
Vue CLIのインストール
まずターミナルでこちらのコマンドを実行
$ npm install -g @vue/cli
すると下記のエラーが発生
npm ERR! code EACCES
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/@vue/cli/bin/vue.js
npm ERR! dest /usr/local/bin/vue
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, symlink '../lib/node_modules/@vue/cli/bin/vue.js' -> '/usr/local/bin/vue'
npm ERR! [Error: EACCES: permission denied, symlink '../lib/node_modules/@vue/cli/bin/vue.js' -> '/usr/local/bin/vue'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'symlink',
npm ERR! path: '../lib/node_modules/@vue/cli/bin/vue.js',
npm ERR! dest: '/usr/local/bin/vue'
npm ERR! }
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.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/◯◯◯/.npm/_logs/2022-02-06T13_36_56_607Z-debug.log
どうも権限がないようなので、権限を与えて上げる必要があるっぽい。
検索してみたら「Vue.js 環境構築時エラーの対処法 (npm install -g vue-cli)」が出てきたので実行してみると、インストールはできるようになって問題なく動作しました。
ただ・・・問題発生!!
僕の環境下では、Macを再起動したらMacの動作が不安定になり、全アプリが使い物にならなくなる問題が発生!!
どうしようもなかったので、OSを入れ直すハメになりました・・・
OSの問題なのか、M1だけで出る問題なのか、はたまた僕の操作にミスが有ったのかは不明です・・・
上記の方法ではうまくいかなかったので、違う方法を探りました。
今回は、エラーが出ているディレクトリに移動して下記コマンドを実行
(◯◯◯はユーザー名)
$ sudo chown ◯◯◯ node_modules
その後に再度
$ npm install -g @vue/cli
を実行。
ここでもまたエラーが発生したので、
$ sudo npm install -g @vue/cli
「sudo」をつけて実行。
そうすると、何事もなかったようにすんなりとインストールできました・・・。
Mac再起動後も動作に問題ないのでよかった・・・!
といった感じで、今回のVue3 CLIがインストールできない問題を解決しました。
Vue.js 環境構築時のエラーの対処法まとめ
①Vue3 CLIインストールコマンドを実行。
$ npm install -g @vue/cli
②エラー箇所に移動し、下記コマンドを実行
$ sudo chown ◯◯◯ node_modules
③「sudo」をつけて再度Vue3 CLIインストールコマンドを実行。
$ sudo npm install -g @vue/cli
もし同じ事態になった方は参考に実行してみてください。