CodeHoon

안녕하십니까 상훈입니다. 

Vue.js 3, Vite를 이용하여 해당 프로젝트를 실행시키는데 아래와 같은 에러가 발생하였습니다.

해결방법

main.js 에 작성하였던 history: createWebHistory 부분 때문에 에러가 발생한 것 입니다.

createWebHistory 를 사용하기 위해 import를 하셨을 겁니다. 그런데, createWebHistory 는 함수로 작성해야합니다.

해당 에러가 사라지게 됩니다.

"도움이 되셨다면 광고 한 번 클릭해주세요. 블로그 운영에 힘이 됩니다. 감사합니다.

참고

REST API를 적용하고,
Vue.js 혹은 React.js에서 Axios를 사용할 때에 초보자는 도대체 backend 를 담당하는 파일을 어디에다가 놓아야할지 모를 경우가 생깁니다.

네 그게 바로 접니다.

환경 및 사용 : Linux (Ubuntu) , Apache , vue - cli project , php , axios

예시)

get 방식으로 axios를 사용해보겠습니다.

apache 서버는 8080포트를 기본으로 사용하고 있습니다. 이를 통해 axios를 port 8080에서 값을 요청하고 받아옵니다.

그럴 때 php 파일의 위치는 

/var/www/html/ 에 작성해야합니다.

추가적으로 api 폴더를 생성하여 그곳에 넣는 방법도 있습니다. ㅎㅎ

만약 이렇게 했을 때 아래와 같은 에러가 발생하면 해당 포스트를 확인해주시길 바랍니다.

감사합니다.

에러문구

VM8167:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Vue.js 3 ,  App.vue 에서 json 파일을 fetch() 하려고 했는데 경로를 옳게 작성했는데 이런 에러가 발생하였음.

해당 파일의 경로는 같은 폴더 내(/src) 에 있었지만 발생하였고, Network에서 확인하니 404에러가 발생하였다.

해결방법

json 파일을 /src 가 아닌, /public에 넣어서 사용하도록 한다.

경로를 변경해주니까 바로 200 success가 반환되었습니다.

내부에 js폴더를 추가시켜 사용하여도 똑같이 잘 읽습니다.

public/js/food.json

결론.

경로 설정을 잘 합시다.

안녕하세요 상훈입니다.

Spring에서 css 경로를 잡아주도록 하겠습니다. [ jsp example css path ]

실제 경로는 
"src/main/webapp/resources/css/cssfilename.css" 인데요,

이걸 다 써줄 수도 없으니, jsp 파일에서 작성할 link부분을 바로 작성하도록 하겠습니다.

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/addrbook.css" type="text/css" media="screen" />

${pageContext.request.contextPath} 를 넣어주는겁니다.

이상입니다.