vue 에서 Module not found: Error: Can't resolve 'axios' in 에러 원인

Vue.js 프로젝트에서 Module not found: Error: Can't resolve 'axios' 오류가 발생했다면,

이는 axios 모듈을 찾을 수 없다는 의미이다.

 

이 오류가 발생하는 주요 원인과 해결 방법을 단계별로 알아본다.

 

📌 1. 오류 원인 분석

 

이 오류는 보통 다음 3가지 이유로 발생한다.

 

1️⃣ axios가 설치되지 않은 경우

Vue 프로젝트에 axios 패키지가 설치되지 않았거나, package.json 파일에 포함되지 않은 경우.

 

2️⃣ 잘못된 설치 경로 문제

• axios가 프로젝트의 올바른 디렉터리에 설치되지 않았을 수 있다.

• 프로젝트에서 패키지를 관리하는 node_modules 디렉터리의 구조가 깨졌을 수 있다.

 

3️⃣ 패키지 매니저(npm, yarn) 문제

• npm 또는 yarn을 사용하는 과정에서 설치가 제대로 되지 않았거나, 캐시 충돌이 발생했을 수 있다.

• 예를 들어, package-lock.json 또는 yarn.lock 파일이 오래된 상태라면 충돌이 발생할 가능성이 있다.

 

🔧 2. 해결 방법

 

✔ 1. axios 설치 여부 확인

 

먼저 axios가 프로젝트에 설치되어 있는지 확인해야 한다.

프로젝트 폴더 내에서 package.json 파일을 열어 dependencies 목록을 확인한다.

 

✅ package.json에서 확인 방법

package.json

👀 위와 같이 axios가 포함되어 있다면, 패키지가 설치된 상태이다.

만약 이 목록에 axios가 없다면 다음 단계를 진행한다.

 

✔ 2. axios 설치 또는 재설치

 

axios가 설치되지 않았다면, 다음 명령어를 실행하여 설치할 수 있다.

 

✅ npm을 사용한 설치

npm install axios

 

✅ yarn을 사용한 설치

yarn add axios

 

💡 Tip:

설치 후에도 문제가 발생한다면 패키지를 삭제하고 다시 설치하는 방법도 고려한다.

npm uninstall axios
npm install axios

 

✔ 3. 패키지 캐시 문제 해결

 

가끔 npm의 캐시 문제가 패키지 설치 오류를 유발할 수 있습니다.

이 경우 캐시를 삭제한 후 다시 설치하면 해결될 수 있습니다.

 

✅ npm 캐시 정리 후 재설치

npm cache clean --force
npm install

 

이 과정을 거치면 npm 캐시가 초기화되고, 패키지를 다시 정상적으로 다운로드하게 된다.

 

✔ 4. axios를 올바르게 import했는지 확인

 

설치가 정상적으로 되었더라도, axios를 불러오는 코드가 잘못되었다면 오류가 발생할 수 있다.

 

✅ Vue 컴포넌트에서 axios import 예제

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('API 요청 실패:', error);
  });

 

✅ 위 코드에서 중요한 점:

• import axios from 'axios'가 정확하게 입력되었는지 확인

• axios.get()을 사용하여 API 요청이 정상적으로 작동하는지 테스트

 

💡 Tip:

간혹 Webpack 또는 Vite를 사용할 때 import axios가 문제를 일으킬 수도 있다.

이 경우 console.log(axios)를 실행하여 axios가 제대로 import되었는지 확인해 본다.

 

📌 3. 해결 과정 정리

문제	해결방법
axios가 설치되지 않음	npm install axios 또는 yarn add axios 실행
패키지 설치 경로 문제	npm cache clean --force 후 다시 설치
axios import 오류	import axios from 'axios' 코드 확인

 

🚀 위 방법을 적용하면 Vue에서 axios 관련 오류를 효과적으로 해결할 수 있다.

 

💡 결론

 

Module not found: Error: Can't resolve 'axios' 오류는 대부분 axios가 설치되지 않았거나, 패키지 관리 문제로 인해 발생한다.

 

✅ 해결 방법 정리:

1️⃣ package.json에서 axios가 설치되었는지 확인

2️⃣ npm install axios 또는 yarn add axios로 설치

3️⃣ npm cache clean --force 후 패키지 재설치

4️⃣ Vue 컴포넌트에서 import axios from 'axios'를 올바르게 작성

 

이제 위 과정을 차근차근 따라가면 오류 없이 Vue에서 axios를 사용할 수 있다! 🚀