laravel+vue前后端分離之服務(wù)器端配置的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)laravel+vue前后端分離之服務(wù)器端配置的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有和林格爾免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

                           

概念明晰

那么這個(gè)時(shí)候，我們都會(huì)想到前后端分離。
那么什么是前后端分離呢？具體的定義今天我們不討論，有興趣可以查看這些文章：到底什么是前后端分離？，前后端分離實(shí)踐有感
明白了基本概念和思路后，我們就應(yīng)該開始干事情了。但是在開始之前，就要思考當(dāng)前項(xiàng)目適不適合前后端分離？什么樣的項(xiàng)目適合前后端分離？因?yàn)槿绻?xiàng)目不適合的話，那么前后端分離無疑是會(huì)加重工作量，例如只是純后臺(tái)管理系統(tǒng)開發(fā)，加上接口訪問，項(xiàng)目訪問量也不大，那么laravel-admin這樣的模式完全能夠勝任。
到這里會(huì)有一個(gè)誤區(qū)，那就是前端代碼和后端代碼分開開發(fā)就是前后端分離（這里貌似和上面說的有點(diǎn)矛盾）。所謂的前后端分離不僅是為了解耦，為了方便后續(xù)維護(hù)和擴(kuò)展，本質(zhì)上是：前端項(xiàng)目與后端項(xiàng)目是兩個(gè)項(xiàng)目，需要獨(dú)立部署。兩個(gè)不同的工程，兩個(gè)不同的代碼庫，不同的開發(fā)人員。前后端工程師需要約定交互接口，實(shí)現(xiàn)并行開發(fā)，開發(fā)結(jié)束后需要進(jìn)行獨(dú)立部署，前端通過http請(qǐng)求調(diào)用后端的restful api。前端只需要關(guān)注頁面的樣式與動(dòng)態(tài)數(shù)據(jù)的解析&渲染，而后端專注于具體業(yè)務(wù)邏輯（來源：為什么要前后端分離？前后端分離的好處和壞處是什么？）。
所以假設(shè)，我們的前后端本地開發(fā)已經(jīng)完成，我們需要放到線上環(huán)境去測試，那么我們?nèi)绾稳シ?wù)器進(jìn)行部署和配置呢？

相關(guān)教程

開始

例如我們完成的項(xiàng)目是這樣的：
前端使用vue，后端使用laravel+jwt+dingo構(gòu)建了api接口，以及使用了laravel-admin作為后端管理系統(tǒng)。
按照傳統(tǒng)配置后端的方法，只配置后臺(tái)管理系統(tǒng)，我們一鍵安裝lnmp后，nginx配置一下，root直接指向項(xiàng)目的public目錄，或者干脆用寶塔面板，幾分鐘以后就好了。這個(gè)對(duì)于我們講武德的程序員來說叫做“點(diǎn)到為止”。后端直接用域名+/admin就可以使用了。
可是現(xiàn)在有了vue，需要把主域名shop.test 給前端用，我們會(huì)說尤老師，牛老師，劉老師你不講武德，尤老師說對(duì)不起，我就要用。
于是就有兩種方法可以達(dá)到使用的效果：

嘗試

1、分別部署，采用不同域名

前端域名是：vue.shop.test
后端域名是shop.test/admin
接口域名是shop.test/api
我只要在前端項(xiàng)目的nginx下，根目錄指向目標(biāo)文件夾就行，例如：

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"的請(qǐng)求，都轉(zhuǎn)發(fā)到接口地址去請(qǐng)求
location /api    {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://shop.test/api;
    }

后端項(xiàng)目配置跨域：

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、分別部署，采用相同域名、不同端口

這個(gè)就相對(duì)簡單很多，不需要第二個(gè)域名，效率也高的多。
例如，我的后端項(xiàng)目位于/www/wwwroot/test_adimin，前端項(xiàng)目是/www/wwwroot/test_vue，我們只需要在nginx配置里再配置監(jiān)聽另外一個(gè)端口就可以：

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否則會(huì)出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
        index  index.html index.htm;
        # try_files $uri $uri/ /index.html;
    }
    #這里要寫，不然會(huì)報(bào)：
    #We’re sorry but XXX doesn’t work properly without JavaScript enabled
    #網(wǎng)上說的把history改為hash就可以，那個(gè)不行，不適用于現(xiàn)在的情況。
    location /api    {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://shop.test/api;
    }
    ...}

配置成功保存，訪問shop.test:8080 速度杠杠的。

總結(jié)

優(yōu)點(diǎn)

1.前后端開發(fā)人員各司其職，各自部署，相互不干涉，提高開發(fā)效率。
2.能夠?qū)崿F(xiàn)解耦，使得業(yè)務(wù)更加清晰，減少業(yè)務(wù)復(fù)雜程度。

缺點(diǎn)

1.增加開發(fā)、部署難度；
2.提高了對(duì)接和溝通成本；
3.不是所有的項(xiàng)目都適合前后端分離，需要框架設(shè)計(jì)者、開發(fā)者自己去判斷

關(guān)于“l(fā)aravel+vue前后端分離之服務(wù)器端配置的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

本文題目：laravel+vue前后端分離之服務(wù)器端配置的示例分析
分享路徑：http://bm7419.com/article24/igejce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、小程序開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營