站長資訊網
前言
前后端分離一直是laravel學習繞不開的話題。前期我們可以通過基于laravel優秀的框架（比如laravel-admin,dcat-admin），快速構建一個不需要太多前端代碼的后臺管理系統。但是到了后期，隨著項目量級的增加，我們還需要諸如中臺（可以簡單理解為面向用戶的管理后臺）、前端網站等業務,如果還使用上述的框架，可能就顯得力不從心。并且在實際開發中會遇到這樣的問題：
-
公司有前端和后端工程師，前端工程師采用vue開發，而作為phper的我們采用laravel去開發。那么問題就來了，我們不可能讓前端工程師也采用laravel-mix，在laravel框架下開發，這樣很不友好。
-
原來的模式耦合度很高，不管是維護還是擴展都相當困難，所以減少模塊間的耦合度，對于后續的維護和擴展都是相當有幫助的。
概念明晰
那么這個時候，我們都會想到前后端分離。
那么什么是前后端分離呢？具體的定義今天我們不討論，有興趣可以查看這些文章：到底什么是前后端分離？，前后端分離實踐有感
明白了基本概念和思路后，我們就應該開始干事情了。但是在開始之前，就要思考當前項目適不適合前后端分離？什么樣的項目適合前后端分離？因為如果項目不適合的話，那么前后端分離無疑是會加重工作量，例如只是純后臺管理系統開發，加上接口訪問，項目訪問量也不大，那么laravel-admin這樣的模式完全能夠勝任。
到這里會有一個誤區，那就是前端代碼和后端代碼分開開發就是前后端分離（這里貌似和上面說的有點矛盾）。所謂的前后端分離不僅是為了解耦，為了方便后續維護和擴展，本質上是：前端項目與后端項目是兩個項目，需要獨立部署。兩個不同的工程，兩個不同的代碼庫，不同的開發人員。前后端工程師需要約定交互接口，實現并行開發，開發結束后需要進行獨立部署，前端通過http請求調用后端的restful api。前端只需要關注頁面的樣式與動態數據的解析&渲染，而后端專注于具體業務邏輯（來源：為什么要前后端分離？前后端分離的好處和壞處是什么？）。
所以假設，我們的前后端本地開發已經完成，我們需要放到線上環境去測試，那么我們如何去服務器進行部署和配置呢？
相關教程推薦：《laravel教程》
開始
例如我們完成的項目是這樣的：
前端使用vue，后端使用laravel+jwt+dingo構建了api接口，以及使用了laravel-admin作為后端管理系統。
按照傳統配置后端的方法，只配置后臺管理系統，我們一鍵安裝lnmp后，nginx配置一下，root直接指向項目的public目錄，或者干脆用寶塔面板，幾分鐘以后就好了。這個對于我們講武德的程序員來說叫做“點到為止”。后端直接用域名+/admin就可以使用了。
可是現在有了vue，需要把主域名shop.test 給前端用，我們會說尤老師，牛老師，劉老師你不講武德，尤老師說對不起，我就要用。
于是就有兩種方法可以達到使用的效果：
嘗試
1、分別部署，采用不同域名
前端域名是：vue.shop.test
后端域名是shop.test/admin
接口域名是shop.test/api
我只要在前端項目的nginx下，根目錄指向目標文件夾就行，例如：
server{ listen 80; server_name vue.shop.test;#域名 index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/vue.shop.test/dist;#根目錄 ...}
反向代理到接口地址：
#意思就是只要含有"api"的請求，都轉發到接口地址去請求 location /api { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://shop.test/api; }
后端項目配置跨域：
location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';}
保存訪問前端：vue.shop.test, 可以正常訪問。
2、分別部署，采用相同域名、不同端口
這個就相對簡單很多，不需要第二個域名，效率也高的多。
例如，我的后端項目位于/www/wwwroot/test_adimin，前端項目是/www/wwwroot/test_vue，我們只需要在nginx配置里再配置監聽另外一個端口就可以：
server{ listen 80; server_name shop.test; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/test_adimin/public; ...}server{ listen 8080; server_name shop.test:8080; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/test_vue/dist; location / { try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404 index index.html index.htm; # try_files $uri $uri/ /index.html; } #這里要寫，不然會報： #We’re sorry but XXX doesn’t work properly without JavaScript enabled #網上說的把history改為hash就可以，那個不行，不適用于現在的情況。 location /api { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://shop.test/api; } ...}
配置成功保存，訪問shop.test:8080 速度杠杠的。
總結
優點
1.前后端開發人員各司其職，各自部署，相互不干涉，提高開發效率。
2.能夠實現解耦，使得業務更加清晰，減少業務復雜程度。
缺點
1.增加開發、部署難度；
2.提高了對接和溝通成本；
3.不是所有的項目都適合前后端分離，需要框架設計者、開發者自己去判斷
