Vue Router v4 HTML5 History模式动态路由刷新/直访资源加载异常

问题出在静态资源的相对路径引用上，和路由的base配置无关：
当你在/users/:id这类嵌套路径下刷新页面时，浏览器会把当前URL的路径（/users/）作为相对路径的基准，去请求main.js，导致请求路径变成/users/main.js，而非应用根目录的/vue-router-transition-v2/main.js。

解决方法 #

方法1：修改静态资源为绝对路径 #

直接在HTML文件里把所有资源引用改成基于应用根目录的绝对路径：
比如原来的：

<script src="main.js"></script>
<link rel="stylesheet" href="style.css">

改成：

<script src="/vue-router-transition-v2/main.js"></script>
<link rel="stylesheet" href="/vue-router-transition-v2/style.css">

方法2：添加<base>标签（更便捷） #

在HTML的<head>中添加base标签，指定整个应用的基准URL，这样所有相对路径的资源都会自动基于这个路径请求：

<head>
  <base href="/vue-router-transition-v2/">
  <!-- 其他head内容 -->
</head>

验证配置 #

你的路由配置和.htaccess配置是正确的：

• createWebHistory('/vue-router-transition-v2')确保路由跳转时的基准路径正确
• .htaccess的重写规则已经把所有非文件/目录的请求转发到子目录的index.html，保证路由刷新时能加载到Vue应用入口

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