网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸。。。

   正常的打包就不说了。至于package.json里面这个hompage的参数,无所谓,最后没有用到。项目用的库就是这些,react-router4,新的路由~

java react部署 react项目部署到tomcat_java react部署

 

看下打包出来的项目:  相比一下其他方式(做后台出家的,前端那一堆复杂的打包方法没用过~)大同小异,直接使用脚手架确实方便,

    改了下生成js的名字,生成的每次都要加几个随机的字符。

      

java react部署 react项目部署到tomcat_Web_02

首先看下路由,就是这样

java react部署 react项目部署到tomcat_Web_03


 

 

接下来,讲重点!!

  Spring的@RequestMapping与Reat-Router4路由结合,这里也是最蛋疼的地方。

①如果是想要返回页面这种,比如{indexUrl},实际值是/wechat/index,

      那么在Spring里面,RequestMapping 要一样!要一样!要一样!说3遍

java react部署 react项目部署到tomcat_服务器_04

  

  什么,你说路径里包含了项目的名字,比如这个项目叫 health

http://localhost:8080/health/wechat/index

http://{nginx配置的域名}/wechat/index

  相当于就是说的根路径,跟拿nginx做静态服务器的那种一样,要根目录访问。这样一来,React-router的路由才和你重叠了,

  感觉就像写CSS欺骗人一样,明明这2货没啥联系,八竿子挨不着,结果实际的显示效果这2人竟然合体了......

  这个时候返回页面就交给Spring了,把打包的html改成jsp,jsp哟,这下想往页面里丢什么参数都好办了

  

java react部署 react项目部署到tomcat_java react部署_05

      然后呢,然后就没有了。接下来的路由管理就交给React-Router4了,/add 和 /submit 现在都是由路由来响应了,Spring里面就没有RequestMapping了。

  当然,你应该知道通过React-Router过去的页面,点击浏览器的刷新是要404的,这个就不解释了。


 

②实际项目中也还是会有通过浏览器路径跳转的,这个时候也有些蛋疼的时候,比如注册页面完成跳转到index页面。

  那么只好写多个路由打包了...这个有点蛋疼,把需要额外@RequestMapping返回的页面,同上面的方式打包

  

java react部署 react项目部署到tomcat_服务器_06

打个包      

java react部署 react项目部署到tomcat_java react部署_07

又打个包

 

③接口,这个加个跨域的处理就行~

java react部署 react项目部署到tomcat_Web_08