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에서 확인 방법
👀 위와 같이 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를 사용할 수 있다! 🚀
'코딩라이브러리 > Vue' 카테고리의 다른 글
vue3 의 router 에서 경로지정하는 index.js 파일 예시 (0) | 2025.01.08 |
---|---|
vuetify component의 input, button 사용할 때 길이 조정하기 (0) | 2024.10.16 |
Vue3 ref() 로 선언된 변수에 데이터 할당하기 (0) | 2024.10.01 |