Vue上线后路由失效

Vue项目上线后路由失效的问题通常与前端路由模式有关。Vue Router提供了两种路由模式：hash模式和history模式。默认情况下，Vue Router使用的是hash模式，这种模式下路由的URL会带有#符号，例如http://wanjunshjie.com/#/user/id。而history模式的URL看起来更像传统的URL，例如http://wanjunshjie.com/user/id。使用history模式时，如果服务器没有正确配置，直接访问或刷新非根URL可能会导致404错误，这是因为服务器尝试直接从文件系统中查找对应的文件。

解决方案

对于history模式：
- Apache服务器：可以在项目的根目录下创建一个.htaccess文件，添加以下配置：
```
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```
- Nginx服务器：需要在Nginx的配置文件中添加try_files指令，通常在location块中添加：
```
location / {
  try_files $uri $uri/ /index.html;
}
```
- Node.js服务器：如果你使用Node.js作为服务器，可以使用express等框架，并添加一个中间件来重定向所有的路由请求到index.html。
```
const express = require('express');
const app = express();
const history = require('connect-history-api-fallback');
app.use(history());
app.use(express.static('dist'));
app.listen(80);
```
- 对于其他服务器类型，也有类似的配置方法，主要目的是将所有的路由请求重定向到index.html，由前端路由接管后续的路由跳转。
使用hash模式：如果你不希望进行服务器配置，也可以选择将Vue Router的模式切换回hash模式，这样URL会带有#，但可以避免直接访问路由时出现的问题。在router/index.js或路由配置文件中，将mode属性设置为hash：
```
const router = new VueRouter({
  mode: 'hash',
  routes: [...]
});
```

总之，Vue项目上线后路由失效的问题主要是由于history模式下服务器配置不正确导致的。根据你的服务器类型和偏好，可以选择上述的解决方案之一来解决这个问题。