如何在Vite中使用pages-generated库修改站点URL路径？

你当前项目使用vite-plugin-pages根据src/pages目录下的文件结构自动生成路由，现有路径带/sidebar/layouts/前缀是因为profile-view.vue文件存放在src/pages/sidebar/layouts/嵌套目录下，选以下任意一种方案即可实现需求：

方案1：调整文件位置（零配置，最简便） #

直接将profile-view.vue文件从src/pages/sidebar/layouts/目录移动到src/pages/根目录下，插件会自动重新生成路由，路径会直接变为/profile-view，无需修改任何路由配置代码。

注意：如果项目中其他位置有硬编码写死旧路径/sidebar/layouts/profile-view的跳转逻辑，需要同步修改为新路径。推荐优先使用路由name做跳转，后续调整路径时无需逐个修改跳转代码。

方案2：不移动文件，自定义路由路径 #

如果不想调整现有文件目录结构，可以直接在profile-view.vue文件的最顶部添加<route>自定义块，覆盖插件自动生成的路径规则：

<route>
{
  path: '/profile-view',
  name: 'profile-view'
}
</route>

<template>
  <!-- 原有页面模板内容 -->
</template>

<script setup>
// 原有页面逻辑代码
</script>

添加后插件会优先读取你自定义的路由配置，直接生成路径为/profile-view的路由规则。

方案3：保留旧路径访问，新增新路径映射 #

如果你需要新旧两个路径都能访问到该页面，可以在路由初始化时新增路由规则，修改你现有的路由配置代码：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 新增新路径直接指向原有页面组件
    {
      path: '/profile-view',
      component: () => import('/src/pages/sidebar/layouts/profile-view.vue'),
      props: true,
      name: 'profile-view'
    },
    ...routes
  ],
})

生效说明 #

修改完成后如果路由没有即时更新，重启本地Vite开发服务即可正常访问新路径。

内容的提问来源于stack exchange，提问作者Robin Singh