【Vue】Vue CLI インストールでエラーが発生した時の対処法・解決策

概要

Vue CLI をインストールした時のエラー内容・対応方法についての備忘録

ちなみに、筆者のPC環境は macOS

事象

「Vue CLI」インストール時に発生に、以下のエラーが発生して、インストールできなかった。

# インストールコマンド
npm install -g @vue/cli

# 以下のエラーが発生
npm notice 
npm notice New minor version of npm available! 8.3.1 -> 8.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.7.0
npm notice Run npm install -g npm@8.7.0 to update!
npm notice 
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/@vue/cli
npm ERR! dest /usr/local/lib/node_modules/@vue/.cli-pPsrUrBg
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@vue/cli' -> '/usr/local/lib/node_modules/@vue/.cli-pPsrUrBg'
npm ERR!  [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@vue/cli' -> '/usr/local/lib/node_modules/@vue/.cli-pPsrUrBg'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/usr/local/lib/node_modules/@vue/cli',
npm ERR!   dest: '/usr/local/lib/node_modules/@vue/.cli-pPsrUrBg'
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-04-24T07_58_59_027Z-debug-0.log

原因

permission denied とあるので、インストール先のディレクトリに対する権限エラーが直接の原因。

npm の -g オプションでの「グローバルインストール」のため、ログインユーザがコンピュータ全体に対してのアクセス権限が無い状態で、インストールを実施したためと思われる。

（ログインユーザが管理者権限を持っていても、PCの設定によって、システム全体に影響するコマンドを安易に受け付けない様に、デフォルトで設定されている場合がある）

対処法・解決策

管理者権限を明示してインストールする

# sudo で管理者としてインストール
sudo npm install -g @vue/cli
# PCにログインするときのパスワードを入力
Password: 

# 実行結果
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
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 apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated subscriptions-transport-ws@0.9.19: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead

added 156 packages, removed 192 packages, changed 741 packages, and audited 898 packages in 42s

86 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

成功したっぽいので、コマンドが正常作動するか確認

# バージョン確認コマンド
vue --version
# 実行結果
@vue/cli 5.0.4

コマンドが正常に動作したので、エラー対応完了。これで問題なく使用することができた。