Vue工程打包部署Tomcat，解决404、静态路径等问题

问题背景

Vue工程打包部署至Tomcat容器，经常会遇到以下问题：
1.F5刷新报错404。
2. 静态文件的路径错误，导致静态资源访问不到。
3. webapps文件夹下面使用了二级路径后，路由错误。
4. url中带有#符号（很多系统集成人员比较介意这个#）

原因

本质的原因有以下几个：

1. Vue的工程在开发环境下默认根路径是"/"，在Tomcat部署环境下的路径，通常不是’/'，这就导致工程的编码层面是要进行区分。
2. Tomcat容器部署的Web应用，在F5刷新时候是有配置规则的，这个规则是记录到了WEB-INF文件夹里面的web.xml中，因此这个文件一定要创建并填写内容。

解决问题

解决以上问题需要设置的内容有以下几个：

1. 修改vue.config.js的publicPath，使其区分node环境与Tomcat环境下的路径。

publicPath: process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_PROD_URL

2. 修改router.js的初始化配置，两个地方。

○mode: 'history', // 去掉url中的#
○base: process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_PROD_URL,

3. 修改Tomcat中的conf/server.xml文件，这一点很重要
   标签中增加一下内容，/traffic-audit/是同router.js的base；docBase的内容为Tomcat中webapps文件夹名称。如下

<Context path="/traffic-audit/" docBase="traffic-audit" debug="0" reloadable="true" />

4. Tomcat中Webapps的工程文件夹（traffic-audit）中需要增加一个WEB-INF文件夹，里面有一个web.xml文件，内容如下。注意启动的display-name的值等于Context标签中的 path值。

<?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>/food-trace/</display-name>
    <error-page>
      <error-code>404</error-code>
      <location>/index.html</location>
    </error-page>
  </web-app>

总结

通常使用nginx部署会少很多麻烦，但是部署环境通常也不是开发程序员能够决定的。Vue部署Tomcat所遇到的静态文件问题、刷新问题通过以上配置修改，基本都能解决。解决不了的，欢迎留言讨论~