這篇文章是記錄一下我剛剛部署的過(guò)程...倒不是怕忘記，只是部署花了我蠻長(zhǎng)時(shí)間的，然而最后明白了之后，才發(fā)現(xiàn)超級(jí)簡(jiǎn)單...
所以寫這篇文章用來(lái)幫助那些和我一樣的小白...
首先我用create-react-app搭建了一個(gè)react項(xiàng)目(這一步操作大家可以去官網(wǎng)看https://reactjs.org/docs/add-react-to-a-new-app.html)
你會(huì)得到一個(gè)結(jié)構(gòu)如下的項(xiàng)目：
我們可以通過(guò) yarn start 運(yùn)行這個(gè)項(xiàng)目：
跑起來(lái)的頁(yè)面是這樣的：
好的，現(xiàn)在你已經(jīng)成功在開發(fā)環(huán)境中跑起來(lái)了，接下來(lái)我們來(lái)打包，然后將其部署到服務(wù)器上
打包也很簡(jiǎn)單，執(zhí)行 npm run build :
你會(huì)發(fā)現(xiàn)在你的項(xiàng)目文件夾里多了個(gè)build文件夾：
然后當(dāng)你點(diǎn)擊index.html之后，會(huì)發(fā)現(xiàn)打開是這樣的：
一片空白...然后你檢查了了下index.html，發(fā)現(xiàn)里面的路徑是這樣的：
發(fā)現(xiàn)了啥問(wèn)題沒(méi)...里面的路徑是絕對(duì)路徑，所以當(dāng)然找不到j(luò)s和css以及圖片資源啥的，那怎么讓這些路徑變成相對(duì)路徑呢，很簡(jiǎn)單...我們?cè)賞ackage.json加上homepage就行：
大家看最后一句就行...然后我們?cè)俅未虬?，然后再點(diǎn)index.html，會(huì)發(fā)現(xiàn)一切正常：
好的，現(xiàn)在我們通過(guò)build得到了html頁(yè)面以及js和css和各種資源...你也發(fā)現(xiàn)了，我們網(wǎng)頁(yè)的入口是index.html
所以比如說(shuō)你自己有個(gè)服務(wù)器地址是 www.abc.com ，你只要在訪問(wèn)www.abc.com的時(shí)候把index.html返回出去就行了...因?yàn)槲易约旱姆?wù)器是用SpringBoot搭建的，所以我就用SpringBoot來(lái)舉例子
SpringBoot返回html頁(yè)面也很簡(jiǎn)單，在resource目錄下新建一個(gè)public文件夾，然后把你React打包的build文件夾里的文件都丟進(jìn)去就行...（這里截圖是我自己的項(xiàng)目，我把一些.js和.json文件去掉了，因?yàn)楹孟駴](méi)啥用）
這個(gè)時(shí)候你訪問(wèn)www.abc.com他就會(huì)直接返回index.html了（注意在SpringBoot里的Controller去掉對(duì)"/"的攔截）
然后你只要把SpringBoot項(xiàng)目部署到服務(wù)器上(如何部署SpringBoot項(xiàng)目大家可以看這篇文章https://blog.csdn.net/ruglcc/article/details/76147645)，然后訪問(wèn)你的域名，你就可以看到index.html了，比如我剛剛部署的自己的網(wǎng)頁(yè)www.nanmian.top
OK這篇文章結(jié)束了，大家也發(fā)現(xiàn)了目前的網(wǎng)頁(yè)很簡(jiǎn)單...就只有一個(gè)頁(yè)面，我剛學(xué)前端...所以也不是很懂，不知道之后項(xiàng)目變大了這種方法還行不行...到時(shí)候我會(huì)再記錄的
最后的最后，這篇文章不能再感謝我可愛(ài)的女朋友了，祝她前程似錦。
