vue3+vite+ts项目中使用vue-router

vite.config.ts:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from "path";

export default defineConfig({
  plugins: [
    vue()
    ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
});

这里的__dirname和path会有红色下划线需要执行：

npm install --save-dev @types/node

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ESNext",
    "lib": ["DOM", "ESNext"],
    "types": ["vite/client", "vue-router"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

在src目录下新建一个router

index.ts

//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { routes } from './routes'
//创建路由器
const router = createRouter({
    //路由模式根据需求选择
    history: createWebHashHistory(),
    routes: routes,
})
export default router

routes.ts

 
import type { RouteRecordRaw } from 'vue-router';
 
//对外暴露配置路由
export const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/page/home/index.vue'),
        meta: {}
    },
   
]

App.vue

<script setup lang="ts">

</script>

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

<style scoped></style>

main.ts

import { createApp } from 'vue'
import './style.css'

import App from './App.vue'

import router from '@/router/index'

const app = createApp(App)
app.use(router)
app.mount('#app')