子舒的博客
·
vite 配置相关笔记
💡
原文中文，约2600字，阅读约需6分钟。
📝
内容提要
本文介绍了如何使用 Vite 和 Vue 构建项目并配置 Vue Router。首先创建 Vite 项目并安装 vue-router，然后在 src/router/index.js 中配置路由，最后在 main.js 中引入路由，并在 App.vue 中使用 router-view 显示组件。此外，还介绍了如何添加动态路由和配置路径别名，以简化模块引用。
🎯
关键要点
- 使用 Vite 创建项目时，默认没有路由，需要手动引入 vue-router。
- 在 src/router/index.js 中配置路由，包括主页和登录页。
- 在 main.js 中引入路由并使用 app.use(router) 来注册路由。
- 在 App.vue 中使用 <router-view> 来显示当前路由对应的组件。
- 可以在 routes 数组中添加动态路由，例如 /user/:id。
- 需要手动配置路径别名 @，以简化模块引用。
- 可以在 vite.config.js 中设置开发服务器的自动打开浏览器功能和访问路径。
❓
延伸问答
如何在 Vite 项目中引入 Vue Router？
在项目中安装 vue-router，然后在 src/router/index.js 中配置路由，并在 main.js 中引入路由。
如何在 Vite 中配置动态路由？
在 routes 数组中添加动态路由配置，例如 { path: '/user/:id', name: 'User', component: () => import('@/views/User.vue') }。
Vite 项目中如何使用路径别名？
在 vite.config.js 中配置别名，例如 '@': fileURLToPath(new URL('./src', import.meta.url))，以简化模块引用。
如何在 Vite 中自动打开浏览器？
在 vite.config.js 中设置 server: { open: true }，这样开发服务器启动时会自动打开浏览器。
在 Vite 项目中如何显示当前路由对应的组件？
在 App.vue 中使用 <router-view> 来显示当前路由对应的组件。
Vite 项目中如何配置主页和登录页的路由？
在 src/router/index.js 中配置路由，添加路径为 '/' 和 '/login' 的路由。
🏷️
标签
➡️
