tomcat部署vue项目（成功版）

最新推荐文章于 2025-09-16 01:27:52 发布

原创最新推荐文章于 2025-09-16 01:27:52 发布 · 1.1w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用Tomcat部署Vue项目的详细步骤。先介绍了Tomcat是免费的Web服务器，能让用户像访问网站一样访问HTML文件；接着说明了Tomcat的下载、启动方法；然后阐述了Vue项目的打包方式；最后讲解了如何在Tomcat上部署Vue项目。

1、tomcat介绍

2、下载tomcat

3、启动tomcat

4、打包vue项目

5、tomcat部署vue项目

1、tomcat简介

tomcat 是免费的web服务器。不使用tomcat也可以打开html页面，但是可以在浏览器的地址里看到 file:d:/test.html 这样的格式，是通过打开本地文件的形式打开的。使用tomcat后，可以这样 127.0.0.1:8080/test.html 像访问一个网站似的，访问一个html文件了。

2、下载tomcat

https://tomcat.apache.org/download-80.cgi，下载tomcat 8 ，解压到指定的目录下。

3、启动tomcat

运行tomcat/bin/startup.bat，看到Server startup in xxx ms，就表明启动成功了。（Tomcat启动之后，不要关闭，关闭了就不能访问了）

4、打包vue项目

vue项目文件目录下运行命令：npm run build，将项目打包好，然后当前项目目录下有一个dist文件夹，该文件夹下有一个index.html和static文件夹。

5、tomcat部署vue项目

在tomcat的webapps文件夹下以项目名称新建一个文件夹，如my_app，然后将index.html和static文件夹复制到my_app文件夹下，然后启动tomcat服务器，访问正常。