之前公司一直是用node服務(wù)器來(lái)對(duì)react打包后的項(xiàng)目進(jìn)行服務(wù)器部署的，最近有后臺(tái)小伙伴問(wèn)可以將打包后的文件丟到tomcat里面部署嗎摹菠，我回答當(dāng)然可以。但是在測(cè)試部署過(guò)程中遇到兩個(gè)問(wèn)題尿贫。

先說(shuō)下部署方式往毡，打包后生產(chǎn)的dist文件夾，丟到tomcat下的webapp下面洪乍。目錄如下圖,通過(guò)http://localhost:8080/dist/訪(fǎng)問(wèn)眯杏，發(fā)現(xiàn)

33.jpg

問(wèn)題1. 由于用的是全局路由（即在所以路由外面包了一層公共入口），發(fā)現(xiàn)部署后只能訪(fǎng)問(wèn)全局路由的內(nèi)容壳澳，所以子路由一片空白岂贩，頁(yè)面上只有一個(gè)全局路由的架子。（如果不用全局路由巷波，頁(yè)面直接就會(huì)空白萎津，訪(fǎng)問(wèn)不到）

1.jpg

原因：原來(lái)默認(rèn)我們?cè)诒镜亻_(kāi)發(fā)是直接通過(guò)http://localhost:8080/來(lái)訪(fǎng)問(wèn)的，現(xiàn)在部署的時(shí)候多了dist抹镊，路由就找不到了锉屈。

解決方案：所以需要在開(kāi)發(fā)過(guò)程中添加基礎(chǔ)路徑。

比如umi框架垮耳，只需要在.umirc.js添加base:'/dist'即可颈渊，其他框架，如dva等氨菇，需要將createHistory()改成createHistory({basename:'/dist'})即可儡炼。這樣頁(yè)面就可以訪(fǎng)問(wèn)到了。

22.jpg

問(wèn)題2：但是又發(fā)現(xiàn)當(dāng)我跳轉(zhuǎn)到其他頁(yè)面時(shí)查蓉，開(kāi)始是好的乌询，只要一刷新，頁(yè)面就報(bào)404找不到了豌研。

404.gif

原因：原來(lái)之所以你在開(kāi)發(fā)時(shí)候可以由首頁(yè)跳轉(zhuǎn)到其他路由地址妹田，是因?yàn)檫@是由前端自行渲染的，即在React Router定義了對(duì)應(yīng)的路由鹃共，有router更改了location,實(shí)際并沒(méi)有刷新網(wǎng)頁(yè)訪(fǎng)問(wèn)后臺(tái)鬼佣。所以頁(yè)面沒(méi)有問(wèn)題。但是部署到tomcat中霜浴，當(dāng)你刷新時(shí)晶衷，此時(shí)并不是之前的客戶(hù)端通過(guò)router來(lái)更改location,而是直接訪(fǎng)問(wèn)的后臺(tái)該頁(yè)面地址，然后后臺(tái)返回頁(yè)面到瀏覽器上。并沒(méi)有經(jīng)過(guò)前臺(tái)的路由（react所有的路由都是在index.html中來(lái)轉(zhuǎn)發(fā)晌纫，所以必須要任何請(qǐng)求必須要經(jīng)過(guò)index.html）税迷，所以就報(bào)404了。

解決方案：所以锹漱，我們需要對(duì)報(bào)404的頁(yè)面進(jìn)行重定向到index.html箭养，剩下的就會(huì)由react-router來(lái)進(jìn)行路徑跳轉(zhuǎn)。

我們?cè)诓渴鸬膁ist文件夾中新建一個(gè)WEB-INF文件夾哥牍，然后新建web.xml文件（web.xml用來(lái)初始化工程配置信息毕泌，比如說(shuō)welcome頁(yè)面，filter嗅辣，listener撼泛，servlet，servlet-mapping辩诞，啟動(dòng)加載級(jí)別等等坎弯。），在其中添加下面代碼就行了：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                    http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">

    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

</web-app>

88.jpg

重啟tomcat服務(wù)器译暂，刷新頁(yè)面抠忘，成功訪(fǎng)問(wèn)。
至此外永，成功部署崎脉。注：上面出現(xiàn)的問(wèn)題，react-router模式為BrowerRouter才會(huì)有這種問(wèn)題伯顶，HashRouter不會(huì)出現(xiàn)問(wèn)題囚灼，因?yàn)閔ash路徑并沒(méi)有改變路徑，只是在同一個(gè)路徑增加參數(shù)而已