有的时候，业务中会有一些需求，直接在其他地方，比如邮件中提供系统链接，通过点击一个url直接跳转到我们的系统中来。
在本地开发时，直接输入对应的url就可以访问，但是当项目部署在服务器之后，直接输入url就会报错404，这是因为router本身提供的就是一个 虚拟路径，通过router内部的机制进行页面跳转和参数传递的，实际项目中根本不存在此路径对应的资源。
对应此问题，尤大在官网上也提到过， https://router.vuejs.org/zh/guide/essentials/history-mode.html 但是里面唯独没有说到tomcat的配置，结合网上的相关资料，我将配置罗列如下：
1.首先我们需要在后台配置拦截404错误码，并将拦截后的页面跳转到我们的前台入口页面index.html，由于我们部署的是纯前台的项目，并没有后台，如何拦截 404呢？这个时候我们需要用到web.xml，我们知道tomat容器的入口就是WEB-INF目录下的web.xml，所以我们就按照传统的web项目，在编译目录也就是dist目录下， 创建WEB-INF目录，再在里面给一个web.xml，该文件中配置的信息很简单，就是拦截个404就可以了。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。 为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
在你的router中添加一个匹配所有路径的路由，并指向你的前台错误页面： { path: '*', component: NotFoundComponent }
最后一步，由于我们是要部署在服务器上，所以路由需要加上我们的服务器根目录名，配置如下： mode: 'history', base: '/sample/'
PS：如果上述的这些都配置了还是不起作用的话，一个很硬的方法就是，直接把模式设定history删除，用router默认的hash模式，这样基本上直接访问url是没有问题的， 只不过url中会多出一个#号，影响美观