Vue工程打包部署Tomcat

问题背景原因解决问题总结

问题背景

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

原因

本质的原因有以下几个：

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

解决问题

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

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

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

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

○mode: 'history', // 去掉url中的#

○base: process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_PROD_URL,

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

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

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">

/food-trace/

404

/index.html

总结

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

查看原文