플러그인 vue 라우터 제거

TS를 지원하는 Vue의 자동 파일 기반 라우팅

StackBlitz 데모

이 빌드 타임 플러그인은 라우팅 설정을 단순화 하고 TypeScript 덕분에 더 안전하고 쉽게 사용할 수 있도록 해줍니다. Vue 라우터 >=4.4.0이 필요합니다.

경고

unplugin-vue-router 유형 라우팅과 파일 기반 라우팅은 기본적으로 안정적이지만 변경될 수 있는 다른 실험적 API(예: 데이터 로더)를 포함합니다. 최신 정보는 관련 문서를 확인하세요. 문제나 설계 결함을 발견하거나 개선할 아이디어가 있는 경우 문제를 열거나 토론을 열어주세요.

설치하다

npm i -D unplugin-vue-router

Vue 플러그인 앞에 VueRouter 플러그인을 추가하세요.

비테

 // vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig ( {
  plugins : [
    VueRouter ( {
      /* options */
    } ) ,
    // ️ Vue must be placed after VueRouter()
    Vue ( ) ,
  ] ,
} )

예: playground/

롤업

 // rollup.config.js
import VueRouter from 'unplugin-vue-router/rollup'

export default {
  plugins : [
    VueRouter ( {
      /* options */
    } ) ,
    // ️ Vue must be placed after VueRouter()
    Vue ( ) ,
  ] ,
}

웹팩

 // webpack.config.js
module . exports = {
  /* ... */
  plugins : [
    require ( 'unplugin-vue-router/webpack' ) ( {
      /* options */
    } ) ,
  ] ,
}

뷰 CLI

 // vue.config.js
module . exports = {
  configureWebpack : {
    plugins : [
      require ( 'unplugin-vue-router/webpack' ) ( {
        /* options */
      } ) ,
    ] ,
  } ,
}

에스빌드

 // esbuild.config.js
import { build } from 'esbuild'
import VueRouter from 'unplugin-vue-router/esbuild'

build ( {
  plugins : [ VueRouter ( ) ] ,
} )

설정

설치 후에는 개발 서버(보통 npm run dev ) 를 실행하여 유형의 첫 번째 버전을 생성해야 합니다 . 그런 다음 tsconfig.json 에 유형을 추가해야 합니다.

{
  "include" : [
    // ...
    " ./typed-router.d.ts "
  ],
  // ...
  "compilerOptions" : {
    // ...
    "moduleResolution" : " Bundler "
    // ...
  }
}

그런 다음 npm vue create 로 생성된 것과 같은 env.d.ts 파일이 있는 경우 unplugin-vue-router/client 유형을 해당 파일에 추가하세요.

 // env.d.ts
/// 
///

env.d.ts 파일이 없으면 파일을 만들고 unplugin-vue-router 유형을 파일에 추가 하거나 tsconfig.json 의 types 속성에 추가할 수 있습니다.

{
  "compilerOptions" : {
    // ...
    "types" : [ " unplugin-vue-router/client " ]
  }
}

마지막으로 vue-router/auto-routes 에서 생성된 경로를 가져와 라우터에 전달합니다.

import { createRouter, createWebHistory } from 'vue-router'
+ import { routes } from 'vue-router/auto-routes'

createRouter({
  history: createWebHistory(),
  // pass the generated routes written by the plugin ?
+  routes,
})

또는 routes 배열을 가져와 수동으로 라우터를 생성하거나 일부 플러그인에 전달할 수도 있습니다. 다음은 Vitesse 스타터의 예입니다.

 import { ViteSSG } from 'vite-ssg'
 import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
 import type { UserModule } from './types'
- import generatedRoutes from '~pages'
+ import { routes } from 'vue-router/auto-routes'

 import '@unocss/reset/tailwind.css'
 import './styles/main.css'
 import 'uno.css'

- const routes = setupLayouts(generatedRoutes)

 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,
   {
-   routes,
+   routes: setupLayouts(routes),
    base: import.meta.env.BASE_URL
  },
   (ctx) => {
     // install all modules under `modules/`
     Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
       .forEach(i => i.install?.(ctx))
   },
 )