Tomcat服务器部署Vue项目步骤及history和hash模式在Tomcat上的区别

最新推荐文章于 2024-09-11 22:43:24 发布

RookieGuDou

最新推荐文章于 2024-09-11 22:43:24 发布

阅读量695

点赞数 23

文章标签： tomcat vue.js

本文链接：https://blog.csdn.net/RookieGuDou/article/details/141593095

版权

博主是做后端的,第一次做vue项目并发布服务器,这里只是自己的理解,仅作为一家之言,欢迎大神们批评指正.....

在安装好的Tomcat上找到webapps文件夹,在webapps文件夹下创建一个文件夹,例如myProject,此文件夹将成为你的项目名称,

然后修改Tomcat文件夹下的conf下的server.xml,在Host标签内下方加入

<Context path="/myProject/" docBase="C:\app\apache-tomcat-8.5.66\webapps\myProject" reloadable="true">

其中,path要和刚刚创建的文件夹名称相同,docBase指向刚刚创建的文件夹,

打包vue项目,在vue项目中使用

npm run build

一般会在项目的根目录下创建一个dist文件夹,然后进入文件夹,将dist文件夹下的内容传到服务器上的myProject文件夹下.

启动服务器访问即可.

2.1 使用hash模式

在router文件夹找到路由位置,

const router = new VueRouter({
  mode: 'hash',
  base: '/myProject/',
  routes
})

在这里可以看到我们设置mode为hash,base设置的这个路径要和Context Path一样

然后访问我们的服务器地址,博主这里以windows上本地部署的Tomcat为例

当第一次访问这个路径,没有问题正常显示,但是同一浏览器第二次访问就会显示空白页,清除缓存后仍然如此,这是什么情况呢?细心的道友会发现浏览器上的地址发生了变化,

/ 后面没有了具体的路由组件

这里解释一下hash模式路径的各个部分

http://localhost:8080/myProject这部分不必多说是你项目的路径

?name=zhangsan是请求额外携带的参数,

而#是 hash符号,用来分隔"正常"部分和hash部分,在vue的hash模式下,vue路由器会监听这个hash部分的变化来更新前端路由

至于/myfistpage,这不是固定的,是你的路由组件 ,Vue路由器会根据这部分内容来匹配并渲染相应的组件

注意#后面的内容（包括#）不会被发送到服务器,这意味着服务器只会接收到/myProject?name=zhangsan这样的请求，而不会知道#/myfistpage部分。Vue路由器会在客户端解析这个hash部分，并根据配置来渲染相应的页面或组件

使用history模式和hash模式一样,第一次正常访问,第二次不行,但是history模式没有#/,

在地址栏url上会显得很干净,至于如何解决第二次不显示问题,欢迎讨论.....

关注