Vue3+Vite生产构建后router-link、router-view不渲染如何解决

以下按问题复现概率从高到低排序，逐一验证即可定位问题：

1. 路由路径大小写不匹配（最高概率） #

代码中存在明显的路径大小写不一致问题：

• 路由规则定义的路径为全小写：/information、/subscribers
• 模板中router-link的跳转地址写为大驼峰格式：/Information、/Subscribers

Vite开发服务器对路径大小写做了兼容处理，不会严格校验，因此开发环境访问正常；但生产构建后vue-router默认对路径大小写严格敏感，匹配不到对应路由时直接导致router-link、router-view无法正常渲染。
修复方式：优先统一所有路由定义、跳转地址的大小写，把模板里的to属性改成和路由path完全一致的小写值。如果需要兼容历史写错的路径，可以临时关闭路由大小写敏感（不符合URL规范，不推荐长期使用）：

const router = createRouter({
  history: createWebHistory(),
  routes,
  sensitive: false
})

2. 路由守卫逻辑缺失导致解析中断 #

现有全局前置守卫没有覆盖所有分支的返回逻辑：当store.hasGroup为true、访问合法路径时，守卫没有任何返回值。开发环境下Vue-Router有容错机制可以默认放行，但生产构建经过Tree-Shaking和代码压缩后，无返回值的守卫会直接中断路由解析链，导致组件不挂载。
修复方式：补全守卫放行逻辑：

router.beforeEach((to) => {
  const store = useStore()
  if (!store.hasGroup && to.path !== '/') {
      return '/'
  }
  return true // 所有合法分支主动放行
})

3. History模式服务端回退规则缺失 #

项目使用createWebHistory即HTML5 History路由模式，该模式要求静态资源服务必须配置「任意非静态资源请求回退到index.html」的规则，否则子路由访问、刷新时会直接返回404，路由无法正常解析。
Vite自带的preview服务默认配置了该回退规则，如果preview时正常、部署到自己的服务后异常，直接给对应服务加回退规则即可，以Nginx为例：

location / {
  try_files $uri $uri/ /index.html;
}

4. Vite部署基路径配置错误 #

如果项目不是部署在域名根路径，而是部署在子目录下（例如https://domain.com/app/），必须在vite.config.ts中配置对应base参数，否则生产环境静态资源加载、路由基路径都会出错，导致页面空白：

export default defineConfig({
  base: '/app/', // 替换为实际部署的子路径，根路径部署可省略该配置，默认值为'/'
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, "./src/locales/**"),
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  }
})

快速验证技巧 #

临时把路由模式替换为createWebHashHistory()（地址带#的哈希路由模式），重新构建后如果页面可以正常渲染，说明问题100%出在路径匹配、服务端回退配置这类和History模式相关的环节，不需要排查组件、依赖引入类问题。

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