참고https://github.com/posva/unplugin-vue-router
vue 에서는 새로운 페이지를 생성할때마다 vue-router 에 직접 등록해줘야 하는 번거로움이 있습니다. 이런 수고스러움을 좀 덜고자 찾아보니 vue 에서도 next 나 nuxt 처럼 파일 기반으로 라우팅을 할 수 있게 지원해주는 모듈을 찾게 됐습니다.
1. unplugin-vue-router 모듈을 설치npm i -D unplugin-vue-router
2. vite.config.ts 에 다음 내용을 추가해 줍니다.vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import VueRouter from 'unplugin-vue-router/vite';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), VueRouter({})],})
3. tsconfig.json 설정 정보 추가tsconfig.json{ "compilerOptions": { // ... "moduleResolution": "Bundler", // ... "types": ["unplugin-vue-router/client"], } // ... "include": [ // ... "./typed-router.d.ts" ],}