springboot vue3 0前後端分離上線

springboot+vue3.0前後臺分離部署到tomcat詳細步驟

1.spring boot打成war包

直接搜sprigboot打包為war包。

springboot打成war包步驟

為啥不打成jar包？

我們是前後臺分離的專案，屬於兩個程式，訪問的時候都需要ip和埠號，並且都部署到tomcat上面。

war包是專門部署到tomcat上面的，jar包不行。

是打算直接訪問前台專案，然後通過前台發請求給sprinboot—也是通過tomcat。 我們的前端和後端

都是位於tomcat下面，ip和埠號都是一樣的。

因為我們的程式都是在tomcat下面的，ip和埠號都是一樣的。此時，我們不在理會spring boot設定的訪問埠和vue裡面的設定的埠。

上網搜尋war和jar的區別。

網上有詳細的打成war步驟，在此我只強調一點：

後來我重新建立了乙個springbooot專案，發現dependencies裡面根本沒有我們專案的座標。至於我們的專案座標為什麼出現在dependencies裡面，可能是自己之前不小心加進去的。

注意，context標籤裡面的path可以指定乙個虛擬路徑，當作這個專案的訪問路徑，此處我們沒有設定，

​ 所以我們可以直接訪問loaclhost:***預設去找這個專案。

​ 但是如果我們預設啟動項有多個，那麼為了區分，就需要設定path了。

1.確定vue的版本，我們的是3.0

不同的vue版本，修改的配置檔案不一樣。

3.router.js修改專案名

後面經過測試，這地方不做任何修改也是可以的

系統預設的是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/』,的。

前面的這樣部署完全沒有問題，但是想想這樣乙個問題：

如果我有兩個前後臺分離專案，那麼tomcat應該如何配置？

–當然，tomcat的server.xml的context標籤可以配置多個啟動項，為了區分不同的專案訪問，我們

會在context的path屬性中新增不同的名稱。 此時，vue端就要大修改了，需要把所有的請求前面都要

加上這個path的值，為了區分不同的專案。

我的做法：

server.xml裡面不配置任何啟動項，

vue端所有的請求前面全部新增war包的名稱–前面不要忘了加/，代表從根路徑觸發。

為了我們部署和測試方便，我們統一規則：

vue所有的請求格式為–url: " 就是冒號後面跟著空格，空格後面是雙引號。

定義了這個規則，那麼我們可以全域性新增war名稱及全域性去掉war名稱。

springboot vue （跨域問題）

在後端使用spring boot。spring boot跨域非常簡單，只需書寫以下 即可。configuration public class customcorsconfiguration bean public corsfilter corsfilter spring boot應用用nginx反...

springboot vue （跨域問題）

if request method get 其中 add header access control expose headers 務必加上你請求時所帶的header。例如本例中的 token 其實是前端傳給後端過來的。如果記不得也沒有關係，瀏覽器的偵錯程式會有詳細說明。chrome firefox...

springboot vue 許可權管理系統

注意因為給了超級管理員的許可權給大家玩，所有資訊都可以操作，建議還是新建一些資訊自己隨便操作，隨意修改的話有可能改不回來 系統原始碼，可能存在一些小問題，如果需要幫助，可以加qq群 850482997 新建立的使用者密碼是 czh123，密碼重置之後也是這個 demo 前端後端 簡介該許可權管理專案...