Vue Router history 模式下静态资源路径拼接问题解决方案
问题描述
在 history 路由模式下，某些静态资源（如 CSS、JS）的请求路径会错误地拼接路由前缀。例如：
- 当前路由：
/user/test - 资源实际路径：
http://localhost:8080/index.js - 错误请求路径：
http://localhost:8080/user/index.js
触发条件
- 使用 history 路由模式
- 涉及两层嵌套路由的外部 JS 组件（示例中使用的是
zw-player视频组件）
解决方案
- 改用 hash 模式（不推荐，影响 URL 美观）
- 简化路由层级 （如将
/user/test改为/test，简单但不完美） - 配置代理 （如通过 Nginx 将
/sys/user代理到/sys，不够优雅） - 最佳方案 ：在
public/index.html中添加<base>标签- 静态配置：
<base href="/sys/"> - 动态配置：
<base href="<%= process.env.VUE_APP_BASE_ROUTER %>">
- 静态配置：
问题分析
该问题主要由 history 模式引起，但网上搜索不到这个问题。
效果对比
-
问题现象 ：请求路径多出
/user前缀，导致 404 错误
-
解决方案 ：添加
<base>标签后请求正常
