Vue Router history 模式下静态资源路径拼接问题解决方案

问题描述

在 history 路由模式下，某些静态资源（如 CSS、JS）的请求路径会错误地拼接路由前缀。例如：

• 当前路由：/user/test
• 资源实际路径：http://localhost:8080/index.js
• 错误请求路径：http://localhost:8080/user/index.js

触发条件

1. 使用 history 路由模式
2. 涉及两层嵌套路由的外部 JS 组件（示例中使用的是 zw-player 视频组件）

解决方案

1. 改用 hash 模式（不推荐，影响 URL 美观）
2. 简化路由层级（如将 /user/test 改为 /test，简单但不完美）
3. 配置代理（如通过 Nginx 将 /sys/user 代理到 /sys，不够优雅）
4. 最佳方案：在 public/index.html 中添加 <base> 标签
   • 静态配置：<base href="/sys/">
   • 动态配置：<base href="<%= process.env.VUE_APP_BASE_ROUTER %>">

问题分析

该问题主要由 history 模式引起，但网上搜索不到这个问题。

效果对比

1. 问题现象：请求路径多出 /user 前缀，导致 404 错误
   

2. 解决方案：添加 <base> 标签后请求正常