Tomcat 之部署Web工程

最新推荐文章于 2024-08-14 19:41:44 发布

原创最新推荐文章于 2024-08-14 19:41:44 发布 · 465 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#tomcat #web #vue #html

Tomcat 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何将Web工程部署到Tomcat服务器，包括直接将项目文件夹放入webapps目录和通过创建XML配置文件的方式。还讨论了直接访问HTML页面与通过Tomcat服务器访问的区别，后者涉及HTTP协议和服务器的资源处理过程。同时，展示了Vue项目在Tomcat上的部署步骤，并提及了刷新页面时可能出现的问题。

Tomcat 之部署Web工程

部署Web工程到Tomcat中
 直接访问html页面与通过tomcat访问的区别

部署Web工程到Tomcat中

第一种方式

第一种方式是直接将web工程拷贝到Tomcat下的webapps目录下的某一个文件夹内，即可访问

具体路径为localhost:port/name1[/name2…]

简单的界面测试

在webapps目录下，新建一个文件夹，这里我新建了个test目录，然后在文件夹里创建了个test.html用于测试：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a7ff0bfX-1625142665456)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701184627575.png)]$

然后随便写上一些代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    TEST_PAGE
</body>

</html>

接下来我们在浏览器访问http://localhost:9090/test/test.html，看到下面的界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gDIUQYZK-1625142665457)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701185040378.png)]$

可以看到，界面访问成功了。

vue项目部署到Tomcat

这里用第一种方式，将vue项目部署到Tomcat服务器上

这里先看一下我的项目目录：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wb0Ji3OU-1625142665458)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701185453395.png)]$

注意：vue-cli3之后，使用vue create app创建项目，项目中不再会出现build文件夹，取而代之的是vue.config.js文件，所以我们需要以往的配置方式需要做一些改变

关于vue.config.js 官方的文档：https://cli.vuejs.org/config/#vue-config-js

配置的具体解释建议还是百度，官方文档看起来可能会让新手感到迷茫

根据下图提示的信息，我们知道了应该做出哪些配置：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hS8kdni3-1625142665459)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701190308308.png)]$

所以我们先在项目根目录创建一个vue.config.js文件（当然这个文件我相信一般的项目都会有的），在里面添加一行代码：publicPath: ‘/vue3/’，如图中所示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wAVwp5Rt-1625142665461)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701191531640.png)]$

这个表示访问项目时前面应该添加的路径，要添加这个的原因是因为Tomcat的一个项目是要在某一个具体路径下（文件夹）运行的。

然后终端运行npm run build命令打包:
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IaT0iMYZ-1625142665462)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701191853693.png)]$

在webapps目录下创建一个文件夹，名字就是之前config文件中设置的vue3，将生成的dist文件夹下的所有文件转移到vue3目录下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FXry83mh-1625142665462)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701192007689.png)]$

这个时候我们开始访问前端界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GP31i5DV-1625142665463)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701192035226.png)]$

可以看到，项目已经被挂在服务器上了（√

这里我项目的主路径/重定向到了shouye，正常的项目只会显示localhost:9090/vue3/（除非你像我一样也搞了重定向）

当然这里还有最重要的一个问题，那就是刷新的时候我们是向重定向之后的路径刷新的，这个时候就会出现服务器未响应的界面（这个问题我没有深究怎么解决）

第二种方式

找到conf\Catalina\localhost，在该目录下新建一个xml文件，名称随意，在里面添加配置信息，即可访问

添加如下信息：

<Context path="/abc" docBase="E:\book" />

path表示工程的访问路径，docBase表示工程目录

直接访问html页面与通过tomcat访问的区别

直接访问html页面

直接访问一个html页面，我们观察地址栏不难发现它使用的协议是file://协议file协议表示告诉浏览器直接读取file:后面的路径，解析展示在浏览器上即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQipegrD-1625143513526)(C:\Users\15998\AppData\Roaming\Typora\typora-user-images\image-20210701204222186.png)]$