这是我在打包的时候遇到的一个问题，在此进行记录。在此，再次感谢vue社区大佬的帮助。

这个问题是这样的，vue本地用npm run serve是没有任何问题的，但是当我使用npm run build以后将打包好的dist放到服务器的tomcat以后，浏览器输入http://localhost:8080/dist/，无法显示内容。百度说将mode: ‘history’去掉,去掉以后http://localhost:8080/dist/确实可以显示内容，但是我用a标签进行页面跳转的时候，会404。这里我找到了两种解决办法：

• 第一种：我们不用a标签，之前a标签的代码如下

<a-icon slot="icon" type="arrow-right" style="margin-right: 10px;"/>
<a :href="item.url">{{ item.title }}</a>

• 我们替换为

<router-link :to='item.url'>
	<button v-text="item.title"></button>
</router-link>

• 这种方式其实就是投机取巧，因为如果将跳转之后的页面的url复制，再次打开，还是不行的。接下来介绍第二种方式

• 第二种：也就是vue社区大佬帮忙解决的，这种方式是在本质上修改了。产生上述问题的主要原因是history路由需要服务器的支持。换句话说，我们需要修改服务器的一些东西，那根据不同的服务器，也有不同的配置。大佬给出的链接中介绍的是nginx服务器，我使用的是tomcat服务器。关于原理性的东西，可以参考大佬给出的链接，里面介绍的比较详细，这里就不班门弄斧了。tomcat的配置可以参考这个链接，因为害怕这位博主的链接失效，我下面简单的整理一下。

  • 第一步：在dist中创建文件夹WEB-INF
    

  • 第二步：在WEB-INF中创建文件web.xml
    

  • 第三步：加入一下内容

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/</location>  
</error-page>  
</web-app>