nodejs express-vue 사용시 Unexpected token export 에러

nodejs에서 vue를 사용할때 대부분의 예시나 튜토리얼은 꽤나 복잡하게 다뤘다.

특히 데이터를 넘길때 기존 express에서 render를 사용하여 데이터를 넘기는 것처럼 넘기지 않고 무조건 ajax와 비슷한 axios를 사용하여 데이터를 주고 받는 것을 보면서 불편함을 느꼈다.

않이;; 나는 그냥 데이터 최초로 넘겨주기만 할껀데 굳이 내가 axios를 써야하나?

render처럼 데이터를 초기에 넘겨주는 방식은 없나?

찾아보니 express-vue라는 npm이 있었다.

방식은 ejs에서 render를 통하여 데이터를 넘겨주는 방식과 비슷하다.

(ejs 렌더링 코드)

그냥 설명서에 나와있는대로 코드를 썼더니 

"Error: render function or template not defined in component: anonymous". 오류가 나면서 안된다.

해결방법을 찾으려고 했는데 정확한 원인도 모르고 해결방법도 별로 안나와있었다.

느낌상 템플릿쪽에서 나는 문제고 템플릿이 선언이 안되어 있어서 그런 것 같았다.

포기하려다가 express-vue 프로젝트의 example / starter라는 항목을 발견했다.(진작 발견했으면 편했을텐데...)

https://github.com/express-vue/express-vue-mvc-starter

express-vue의 프로젝트를 사용하는 방법에 대해서 알 수 있는 샘플 프로젝트이다.

프로젝트에서 app폴더 내에 main.vue를 까보면 아래와 같다.

나도 저렇게하면 되겠지? 하고 가져다가 썼다.

일단 페이지는 저런식으로 나와버리고 콘솔에서도 "Unexpected token export"라는 오류가 발생했다.

먼가 느낌상 코드상의 문제는 아니라고 생각이 들었다.

main.vue쪽에서 export부분이 es6용 코드를 es5에서 가져다가 써서 생긴 문제라고 생각이 들었다.

그래서 아래의 export 부분을 es5코드로 바꾸었다.

이후 잘 된다.

아무래도 불편하기도 하고 es6로 빨리 업그레이드를 해야할 것 같다.