springboot+vue3.0前后端分离上线

内容

springboot+vue3.0前后台分离部署到tomcat详细步骤

正文

springboot端

1.spring boot打成war包

直接搜sprigboot打包为war包。

springboot打成war包步骤

为啥不打成jar包？

1. 我们是前后台分离的项目，属于两个程序，访问的时候都需要ip和端口号，并且都部署到tomcat上面。

   war包是专门部署到tomcat上面的，jar包不行。

2. 两个程序都部署到tomcat的webapps目录下面；tomcat一次性只能访问一个项目，我们的请后台分离

   是打算直接访问前台项目，然后通过前台发请求给sprinboot—也是通过tomcat。 我们的前端和后端

   都是位于tomcat下面，IP和端口号都是一样的。

3. 因为我们的程序都是在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名称。