vue2 라우터 설치만 3번째...라우터만 설치하면 나타나는 에러늪!!!!

꼭? 필요한 설정이 있어서 기록합니다.

 

에러

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint]
D:\stduy\vue2-project\todo2\src\views\HomeView.vue
  13:11  error  Component name "home" should always be multi-word  vue/multi-word-component-names

 

 * 해결 *

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   lintOnSave:false  <--- 추가
})


vue.config.js 파일에 lintOnSave의 속성을 false로 추가해주면 컴포넌트 단일 이름의 에러 인식을 막을 수 있습니다.
동일 에러는 사라지고 정상 작동 되고있습니다.^^;

 

 

참고
https://velog.io/@ensun_p/Vue-router-%EC%84%A4%EC%B9%98-%EC%BB%B4%ED%8C%8C%EC%9D%BC-%EC%98%A4%EB%A5%98-%EC%A3%BC%EC%9D%98

 

실행

npm install vue-router --save

 

에러

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: navtest@0.1.0
npm ERR! Found: vue@2.7.16
npm ERR! node_modules/vue
npm ERR!   vue@"^2.7.16" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from vue-router@4.3.1
npm ERR! node_modules/vue-router
npm ERR!   vue-router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\okha4\AppData\Local\npm-cache\_logs\2024-04-17T10_28_35_801Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\okha4\AppData\Local\npm-cache\_logs\2024-04-17T10_28_35_801Z-debug-0.log

 

* 1차 *

검색을 하니  npm version과 vue router 간의 문제라고 하여.  npm 버전을 확인해보았습니다.

npm 10.2.4 버전 너무 최신인 듯 합니다.ㅜㅜ

1. npm 버전 변경
npm install -g npm@6.14.8

2. router 재 설치
npm install vue-router --save

 

에러

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@3. I'll try to do my best with it!
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated webpack-chain@6.5.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@vue%2fvue-loader-v15 - Not found
npm ERR! 404
npm ERR! 404  '@vue/vue-loader-v15@15.11.1' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@vue/cli-service'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\okha4\AppData\Roaming\npm-cache\_logs\2024-04-17T10_44_41_959Z-debug.log

 

이번에는 다른에러...ㅜㅜ

 

검색하니 아래와 같이 하면 되다고하여 실행 하였습니다.

npm i --legacy-peer-deps

 

드디어!!! 

 

* 해결 *

vue2 router 설치 어렵네요.ㅠㅠ
npm버전 잘 확인해 보세요.

 

https://github.com/vuejs/vue-cli/issues/6270

에러

error Component name "Header" should always be multi-word

( 구성 요소 이름 "***"는 항상 여러 단어로 이루어져야 합니다.)

 

* 해결 *

<script>
export default {
  name: "Header",  >> 변경  " HeaderItem "
};
</script>

 

네이밍을 할때는 카멜 케이스, 파스칼 케이스, 케밥 케이스 으로 네이밍 단어를 구분해줘야만 여러 단어로 인식한다!

 

참고

eslint-plugin-vue 공식문서

에러
  0 errors and 29 warnings potentially fixable with the `--fix` option.

 

* 해결 *

npm run lint -- --fix

 

 

정보: Marking servlet spring as unavailable

7월 03, 2012 5:22:44 오후 org.apache.catalina.core.StandardContext loadOnStartup
심각: Servlet /Spring3MVC threw load() exception
java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1711)
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1556)
at org.apache.catalina.core.DefaultInstanceManager.loadClass(DefaultInstanceManager.java:525)
at org.apache.catalina.core.DefaultInstanceManager.loadClassMaybePrivileged(DefaultInstanceManager.java:507)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManager.java:124)
at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1136)
at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:1080)
at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:5015)
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5302)
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1566)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1556)
at java.util.concurrent.FutureTask$Sync.innerRun(FutureTask.java:334)
at java.util.concurrent.FutureTask.run(FutureTask.java:166)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1110)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:603)
at java.lang.Thread.run(Thread.java:722)

 

 

* 해결 *

정확한 이유는 모르겠습니다.

dispatcher-Servlet 에 정의된 클래스가 어딨는지 못찾는다고 하는데
클래스 이름 오타나 클래스 상위에 @Controller 선언이라던지 등등 소소한 내용들 먼저 확인하시길 바랍니다.

+ Recent posts