vite+ts 踩坑记-配置路由vue-router报错找不到文件

安装路由（vue-router>=4.0.0）

yarn add vue-router

或

npm i vue-router

配置路由

新建router/index.ts 配置路由 配置和3.0时差不多，最大区别就是需要引用createRouter和createWebHistory

接下来就是一顿操作猛如虎

配置router文件

//router/index.ts
import { createRouter,createWebHistory } from "vue-router";

const router = createRouter({
  history:createWebHistory(),
  routes:[
    {
      path: '/',
      redirect: 'login',
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/index.vue'),
      meta: {
        requiresAuth: false,
      },
    },
    {
      path: '/test',
      name: 'test',
      component: () => import('@/views/test/index.vue'),
      meta: {
        requiresAuth: false,
      },
    },
  ]
})

export default router

配置mian.ts文件

//main.ts

import router from './routes';
const app = createApp(App)

app.use(router)
app.mount('#app')

配置App.vue文件

//App.vue
<script setup lang="ts">
</script>

<template>
  <router-view />
</template>

<style></style>

一跑起来就报错，居然找不到文件

解决方法

引用方式改一下,不用'@'就可以了，也不知道是不是vite的bug。。。

{
  path: '/login',
  name: 'login',
  component: () => import('../views/login/index.vue'),
  meta: {
    requiresAuth: false,
  },
},