打包服務(wù)端：

IDEA打開項(xiàng)目，等待項(xiàng)目初始化完成，點(diǎn)擊Build- Build Artifacts，進(jìn)行打包

image.png

點(diǎn)擊之后會(huì)出現(xiàn)下面這個(gè)小窗口，選擇紅框中部分：

image.png

這個(gè)過程就是打包了，等待打包完成之后，會(huì)出現(xiàn)一個(gè)target目錄，這個(gè)目錄下會(huì)有一個(gè)war包

image.png

用快捷鍵ctrl+shift+c，復(fù)制文件路徑，進(jìn)入路徑將以上生成的war包，修改成ROOT.war

image.png

設(shè)置tomact：

進(jìn)入92服務(wù)器，解壓一個(gè)tomact的zip，并且將該tomact文件夾名字修改成自己可以識(shí)別的；

image.png

進(jìn)入tomact目錄下的webapp，如下：

image.png

將這個(gè)目錄下的文件刪掉；其實(shí)也可以不刪，但是可能會(huì)影響自己項(xiàng)目；所以最好刪掉吧；

并且將打包好的ROOT.war 復(fù)制進(jìn)來

image.png

修改服務(wù)端口：

進(jìn)入tomact的conf文件夾，找到server.xml文件，文件如下：

image.png

修改端口：

image.png

image.png

端口改好之后保存，就可以啟動(dòng)服務(wù)了；

進(jìn)入bin目錄下，找到startup.bat，雙擊啟動(dòng)即可；

image.png

在cmd命令行打印出一下內(nèi)容就表示服務(wù)啟動(dòng)成功

image.png

可以看到webapp目錄下，多出來如下東西

image.png

打包web前端：

啟動(dòng)項(xiàng)目，將項(xiàng)目的服務(wù)器路徑改成上面啟動(dòng)的服務(wù)路徑：http:// xxx.xxx.xxx.xxx:xxxx ;

等待項(xiàng)目加載完成；npm install 安裝插件包；

image.png

安裝成功之后，執(zhí)行npm run build，進(jìn)行前端打包；打包結(jié)束之后會(huì)出現(xiàn)一個(gè)這個(gè)目錄

image.png

image.png

將該目錄下所有內(nèi)容copy到tomcat--webapps-ROOT目錄下：

image.png

到這里，你的web前端已經(jīng)發(fā)布成功啦；可以訪問了

我們前端還有另外一個(gè)小app，所以呢，這里直接將app下的文件copy進(jìn)ROOT-app下，就可以了；

總結(jié)

以上是生活随笔為你收集整理的前后端分离的项目部署到tomcat_前后端分离后，tomcat服务器部署和发布的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。