vite.config.ts:

javascript">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会有红色下划线需要执行：

javascript">npm install --save-dev @types/node

tsconfig.json

javascript">{"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

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

routes.ts

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

App.vue

javascript"><script setup lang="ts"></script><template><router-view />
</template><style scoped></style>

main.ts

javascript">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')