Tomcat 之 部署Web工程
部署Web工程到Tomcat中
直接访问html页面与通过tomcat访问的区别
部署Web工程到Tomcat中
第一种方式
第一种方式是直接将web工程拷贝到Tomcat下的webapps目录下的某一个文件夹内,即可访问
具体路径为localhost:port/name1[/name2…]
简单的界面测试
在webapps目录下,新建一个文件夹,这里我新建了个test目录,然后在文件夹里创建了个test.html用于测试:
然后随便写上一些代码:
<!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,看到下面的界面:
可以看到,界面访问成功了。
vue项目部署到Tomcat
这里用第一种方式,将vue项目部署到Tomcat服务器上
这里先看一下我的项目目录:
注意:vue-cli3之后,使用vue create app创建项目,项目中不再会出现build文件夹,取而代之的是vue.config.js文件,所以我们需要以往的配置方式需要做一些改变
关于vue.config.js 官方的文档:https://cli.vuejs.org/config/#vue-config-js
配置的具体解释建议还是百度,官方文档看起来可能会让新手感到迷茫
根据下图提示的信息,我们知道了应该做出哪些配置:
所以我们先在项目根目录创建一个vue.config.js文件(当然这个文件我相信一般的项目都会有的),在里面添加一行代码:publicPath: ‘/vue3/’,如图中所示:
这个表示访问项目时前面应该添加的路径,要添加这个的原因是因为Tomcat的一个项目是要在某一个具体路径下(文件夹)运行的。
然后终端运行npm run build
命令打包:
在webapps目录下创建一个文件夹,名字就是之前config文件中设置的vue3,将生成的dist文件夹下的所有文件转移到vue3目录下:
这个时候我们开始访问前端界面:
可以看到,项目已经被挂在服务器上了(√
这里我项目的主路径
/
重定向到了shouye
,正常的项目只会显示localhost:9090/vue3/
(除非你像我一样也搞了重定向)
当然这里还有最重要的一个问题,那就是刷新的时候我们是向重定向之后的路径刷新的,这个时候就会出现服务器未响应的界面(这个问题我没有深究怎么解决)
第二种方式
找到conf\Catalina\localhost,在该目录下新建一个xml文件,名称随意,在里面添加配置信息,即可访问
添加如下信息:
<Context path="/abc" docBase="E:\book" />
path
表示工程的访问路径,docBase表示工程目录
直接访问html页面与通过tomcat访问的区别
直接访问html页面
直接访问一个html页面,我们观察地址栏不难发现它使用的协议是file://
协议file协议表示告诉浏览器直接读取file:
后面的路径,解析展示在浏览器上即可
这是不经过网络的。
通过Tomcat访问
通过将Web工程挂载到Tomcat服务器上,我们可以发现使用的协议是http
协议,这是经过网络的,跟file
协议完全不同:
其过程为客户端(浏览器)将对该页面的请求发送给Tomcat服务器,Tomcat服务器接收到请求后,读取要访问的资源文件,然后返回客户端需要的页面的内容,客户端得到内容之后,再将其解析到浏览器上,这其实就跟我们平常前后端之间的请求差不多。