内容
springboot+vue3.0前后台分离部署到tomcat详细步骤
正文
springboot端
1.spring boot打成war包
直接搜sprigboot打包为war包。
为啥不打成jar包?
- 我们是前后台分离的项目,属于两个程序,访问的时候都需要ip和端口号,并且都部署到tomcat上面。
war包是专门部署到tomcat上面的,jar包不行。- 两个程序都部署到tomcat的webapps目录下面;tomcat一次性只能访问一个项目,我们的请后台分离
是打算直接访问前台项目,然后通过前台发请求给sprinboot—也是通过tomcat。 我们的前端和后端
都是位于tomcat下面,IP和端口号都是一样的。- 因为我们的程序都是在tomcat下面的,IP和端口号都是一样的。此时,我们不在理会spring boot设置的访问端口和vue里面的设置的端口。
上网搜索war和jar的区别。
网上有详细的打成war步骤,在此我只强调一点:
后来我重新建立了一个springbooot项目,发现dependencies里面根本没有我们项目的坐标。至于我们的项目坐标为什么出现在dependencies里面,可能是自己之前不小心加进去的。
2.springboot的war包存放的位置
3.配置tomcat默认访问项目为我们的springboot项目app-0.0.1-SNAPSHOT
因为vue打包之后访问的地址默认是:localhost:8080/, 没有我们的后台springboot项目名app-0.0.1-SNAPSHOT。 因此我们需要设置app-0.0.1-SNAPSHOT项目为默认访问的。
注意,context标签里面的path可以指定一个虚拟路径,当作这个项目的访问路径,此处我们没有设置,
所以我们可以直接访问loaclhost:xxx默认去找这个项目。
但是如果我们默认启动项有多个,那么为了区分,就需要设置path了。
vue端(3.0)
vue前后端分离打包
1.确定vue的版本,我们的是3.0
不同的vue版本,修改的配置文件不一样。
2.到vue项目中修改vue.config.js文件
3.router.js修改项目名
后面经过测试,这地方不做任何修改也是可以的
4.修改router.js
mode: ‘history’,//把这行注释了,或者mode: ‘hash’,
系统默认的是hash模式,这种模式允许我们远程部署的时候刷新浏览器路由是正确的。
5.执行npm run build打包
5.在Tomcat 文件夹中新建一个文件夹名字应该可以随便取,我命名为easy-vue
6.访问http://localhost:8080/easy-vue/
然后发现,界面是出来了,但是登陆不上去;
看console的报错信息:404,http://localhost:8080/easy-vue/login;
如果在vue端把登陆请求login前加上/;
那么重新打包部署访问,发现成功:http://localhost:8080/login;
你发现,地址栏上面的easy-vue没有了;
因此,在vue端,把所有的请求前面都给我加上/,/代表从根目录开始,不带/,就会把easy-vue加到了地址栏上。
请求前面加上/是一致要求,我之前在开发阶段就没有加, 记住:开发和上线等所有环境都要加上/。
easy-vue是我们在vue.config.js里面新添publicPath:‘/easy-vue/’,的。
完善vue打包部署–我以后都会使用这个方式
前面的这样部署完全没有问题,但是想想这样一个问题:
如果我有两个前后台分离项目,那么tomcat应该如何配置?
–当然,tomcat的server.xml的context标签可以配置多个启动项,为了区分不同的项目访问,我们
会在context的path属性中添加不同的名称。 此时,vue端就要大修改了,需要把所有的请求前面都要
加上这个path的值,为了区分不同的项目。
我的做法:
server.xml里面不配置任何启动项,
后台打成war包放到webapps里面,
vue端所有的请求前面全部添加war包的名称–前面不要忘了加/,代表从根路径触发。
为了我们部署和测试方便,我们统一规则:
vue所有的请求格式为–url: " 就是冒号后面跟着空格,空格后面是双引号。
定义了这个规则,那么我们可以全局添加war名称及全局去掉war名称。