解决Vue router history 静态资源访问404,请求链接被加上了path的前一部分

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> 标签后请求正常