子舒的博客
·
vite 配置相关笔记
内容提要
本文介绍了如何使用 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 的集成
在使用 Vite 创建 Vue 项目时，默认并不包含路由功能，开发者需要手动引入 vue-router。这一过程虽然简单，但对于初学者来说，理解路由的配置和使用是构建单页应用的关键。确保在 src/router/index.js 中正确配置路由，以便实现页面间的导航。
动态路由的应用
动态路由允许开发者根据 URL 参数加载不同的组件，例如通过 '/user/:id' 路径来展示用户信息。这种灵活性使得应用能够根据用户输入或行为动态变化，提升用户体验。在设计路由时，合理规划动态路由的使用场景是非常重要的。
路径别名的配置
Vite 默认不支持路径别名 '@'，需要在 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' 的路由。
