[Vue] Vue CLI 설치 시 권한 오류 해결(EACCES)

Vue CLI를 설치하려고 아래와 같이 명령문을 작성하였다.

 npm install -g @vue/cli

 

그랬더니 아래와 같이 오류가 나왔다.

npm error code EACCES
npm error syscall mkdir
npm error path /usr/local/lib/node_modules/@vue
npm error errno -13
npm error Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'
npm error     at async mkdir (node:internal/fs/promises:858:10)
npm error     at async /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:624:20
npm error     at async Promise.allSettled (index 0)
npm error     at async [reifyPackages] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:325:11)
npm error     at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:142:5)
npm error     at async Install.exec (/usr/local/lib/node_modules/npm/lib/commands/install.js:150:5)
npm error     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:74:5) {
npm error   errno: -13,
npm error   code: 'EACCES',
npm error   syscall: 'mkdir',
npm error   path: '/usr/local/lib/node_modules/@vue'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It is likely you do not have the permissions to access this file as the current user
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.

npm error A complete log of this run can be found in: /Users/maverick/.npm/_logs/2024-11-17T06_44_55_170Z-debug-0.log

 

이럴 때 해결 방안은 NPM 전역 설치 경로 변경를 해줘야 한다. 

그 이유는 기본적으로 NPM은 전역 패키지를 시스템의 특정 경로에 설치한다. 이 경로는 일반적으로 /usr/local/lib/node_modules와 같은 시스템 디렉토리다. 이 디렉토리에 쓰기 권한이 없는 경우, 전역 패키지를 설치할 때 EACCES 권한 오류가 발생한다.

 

1. 새로운 디렉토리 생성

mkdir ~/.npm-global

 

2. NPM 설정 변경

npm config set prefix '~/.npm-global'

    * 이 경우, Vue CLI와 같은 전역 패키지는 ~/.npm-global/lib/node_modules 디렉토리에 설치된다.

 

3. 환경 변수 설정

 - .bashrc, .bash_profile, 또는 .zshrc 파일을 연다. (Bash와 Zsh 셸의 설정을 저장하는 파일)

nano ~/.bashrc  
# 또는 nano ~/.bash_profile, nano ~/.zshrc

 

 * (주의) 본인이 bash 인지 zsh인지 알고나서 파일을 열어야 함.

확인하는 방법 : 터미널에 아래와 같이 입력한다.

echo $SHELL

 

 - 다음 줄을 추가한다.

export PATH=~/.npm-global/bin:$PATH

 

    * 이렇게 하면 ~/.npm-global/bin 디렉토리에 있는 실행 파일들을 터미널에서 직접 사용할 수 있게 된다.

~/.npm-global/
├── bin/            # 실행 파일이 위치
└── lib/
    └── node_modules/  # 설치된 패키지들이 위치

따라서, Vue CLI를 설치하게 되면 ~/.npm-global/lib/node_modules/@vue/cli 경로에 설치되며, 해당 실행 파일은 ~/.npm-global/bin/vue에 위치하게 됩니다.

 

 - 파일을 저장하고 다시 터미널로 나온다.

Nano에서 저장하고 종료하는 방법:
저장: Ctrl + O를 눌러 저장
종료: Ctrl + X를 눌러 Nano를 종료

 

 - 터미널에서 다음 명령어를 입력하여 변경 사항을 적용한다.

source ~/.bashrc  
# 또는 source ~/.bash_profile, source ~/.zshrc

 

 

4. Vue CLI를 설치한다.

npm install -g @vue/cli