tomcat部署vue项目教程文档

安装nodejs

https://blog.csdn.net/zzwwjjdj1/article/details/51980082

全局安装@vue/cli

安装好nodejs后，打开命令行运行命令：npm install -g @vue/cli

目前vuecli版本为3.3，安装完cli后，命令行运行 vue --version可以看到。

根目录运行npm run build

nodejs和vuecli都安装成功后，在项目根目录运行 npm run build 命令

安装java

网上自己找。

下载tomcat

压缩包下载：http://mirror.bit.edu.cn/apache/tomcat/tomcat-9/v9.0.20/bin/apache-tomcat-9.0.20.zip

解压tomcat压缩包。

把打包后的文件夹放到webapps文件夹下 

vue项目打包完成后，把打包的文件夹放到tomcat的webapps文件夹下，完成！！！

静态文件修改后，一般是不需要重启tomcat的。

启动和关闭tomcat

在解压的tomcat文件夹下的bin目录里有2个.bat文件，双击startup.bat 启动tomcat；双击shutdown.bat关闭tomcat服务

解决history模式路由404问题

vue打包的项目放在tomcat里，路由会出现404问题，只要把所有404重定向到index.html文件就能解决。

在打包后的项目根目录创建WEB-INF文件夹，在WEB-INF文件夹下创建web.xml，内容如下：

<?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_4_0.xsd"
  version="4.0"
  metadata-complete="true">

  <display-name>xxxxxx</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>