소개
이 프로젝트에서는 vue-router 3.1.3 라이브러리에서 경고 문제를 해결하는 방법을 배우게 됩니다. vue-router 는 Vue.js 애플리케이션을 위한 인기 있는 라우팅 라이브러리이며, 3.1.3 버전에는 pathMatch 매개변수가 빈 값일 때 경고를 생성하는 버그가 있었습니다. 단계별 가이드를 따르면 문제를 찾아 코드를 수정하고 라이브러리를 다시 빌드하여 경고를 해결할 수 있습니다.
🎯 작업
이 프로젝트에서는 다음을 배우게 됩니다.
- vue-router 3.1.3 라이브러리의
params.js파일에서 문제를 식별하는 방법 - 경고를 제거하기 위해 코드를 수정하는 방법
- 수정 사항을 적용하여 vue-router 3.1.3 라이브러리를 다시 빌드하는 방법
- 수정된 버전을 테스트하여 경고가 더 이상 표시되지 않는지 확인하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- 타사 라이브러리의 문제를 해결하고 수정할 수 있습니다.
- 종속성을 최신 상태로 유지하고 알려진 버그를 수정하는 것의 중요성을 이해할 수 있습니다.
- 코드 변경 후 라이브러리를 다시 빌드하는 프로세스를 시연할 수 있습니다.
- 라이브러리의 기능이 예상대로 작동하는지 테스트할 수 있습니다.
Vue-Router 3.1.3 경고 수정
시작하려면 다음과 같이 왼쪽에 있는 파일의 디렉토리 구조를 살펴보십시오.
├── vue-router-3.1.3
├── vue.js
└── index.html
프로젝트를 실행하려면 WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하십시오.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고친 다음 "/nope/"를 클릭하고 "test"를 클릭한 후 브라우저 콘솔에서 Console 옵션을 엽니다. 다음 메시지가 표시됩니다.
[vue-router] missing param for named route "NotFound": Expected "0" to be defined
이 단계에서는 vue-router 3.1.3 코드의 pathMatch 문제로 인해 생성된 경고를 수정하는 방법을 배우게 됩니다.
vue-router-3.1.3/src/util/params.js파일을 엽니다.- 경고를 발생시키는 28 번째 줄의 코드를 찾습니다.
if (process.env.NODE_ENV !== "production") {
warn(false, `missing param for ${routeMsg}: ${e.message}`);
}
- 경고를 제거하기 위해
warn함수 호출을 주석 처리합니다.
if (process.env.NODE_ENV !== "production") {
// warn(false, `missing param for ${routeMsg}: ${e.message}`)
}
이렇게 하면 콘솔에 경고가 표시되지 않습니다.
Vue-Router 3.1.3 프로젝트 재빌드 및 테스트
이 단계에서는 경고를 수정한 후 vue-router 3.1.3 프로젝트를 재빌드하고 테스트합니다.
- 터미널을 열고
vue-router-3.1.3디렉토리로 이동합니다. npm install명령을 실행하여 종속성을 설치합니다. 이 프로세스는 시간이 걸릴 수 있으므로 잠시 기다려 주십시오. (오랫동안 멈춰 있으면Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)- 모든 종속성이 성공적으로 설치된 후
npm run build명령을 실행하여 프로젝트를 재빌드하고 릴리스합니다. 이렇게 하면 경고 수정 사항이 포함된 vue-router 3.1.3 라이브러리의 새로운 빌드가 생성됩니다. - 브라우저에서
Web 8080페이지를 엽니다. - "/nope/" 링크를 클릭한 다음 "test" 링크를 클릭합니다.
- 브라우저 콘솔을 열고 경고 메시지가 더 이상 표시되지 않는지 확인합니다.
축하합니다! vue-router 3.1.3 라이브러리에서 경고 문제를 성공적으로 해결했습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
