tomcat部署vue项目教程文档

曾经终败给现在 2022-01-20 03:13 306阅读 0赞

# 安装nodejs #

[https://blog.csdn.net/zzwwjjdj1/article/details/51980082][https_blog.csdn.net_zzwwjjdj1_article_details_51980082]

# 全局安装@vue/cli #

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

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

![20190610165106475.png][]

# 根目录运行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][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 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70][]

在解压的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>

[https_blog.csdn.net_zzwwjjdj1_article_details_51980082]: https://blog.csdn.net/zzwwjjdj1/article/details/51980082
[20190610165106475.png]: /images/20220120/aaedf47bc10445bfb90ac1291f84909a.png
[http_mirror.bit.edu.cn_apache_tomcat_tomcat-9_v9.0.20_bin_apache-tomcat-9.0.20.zip]: http://mirror.bit.edu.cn/apache/tomcat/tomcat-9/v9.0.20/bin/apache-tomcat-9.0.20.zip
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70]: /images/20220120/44e1c638a839497bb1127e12097916b2.png