【Vue】处理Vue CLI安装时出现错误的方法和解决方案

简要概述

安装Vue CLI时出现的错误内容和解决方法的备忘录。

顺便提一下,笔者使用的电脑环境是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

导致这种情况的因素是什么?

权限被拒绝,这是因为安装目录的权限错误直接导致的。

由于使用npm的-g选项进行”全局安装”,推测是登录用户在没有对整个计算机具有访问权限的情况下进行了安装操作。

即使登录用户拥有管理员权限,由于计算机的设置,系统有时会默认不轻易接受可能对整个系统产生影响的命令。

应对方法·解决方案

请明确授予管理员权限后进行安装。

# 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

由于命令成功执行,错误处理已完成。现在可以无问题地使用了。