<acronym id="klsvp"></acronym>

<object id="klsvp"><strong id="klsvp"><small id="klsvp"></small></strong></object>
  • <p id="klsvp"><del id="klsvp"><small id="klsvp"></small></del></p>
    <big id="klsvp"><ruby id="klsvp"></ruby></big>
    <acronym id="klsvp"></acronym>
      1. 當前位置:博客首頁>>nginx >> 閱讀正文

        使用Nginx反向代理部署laravel和history模式的Vue項目[更新]

        作者: 鄭曉 分類: nginx 發布于: 2019-11-30 00:13 瀏覽:8,021 評論(2)


        [2019.12.2 更新] nginx.conf里要加上對laravel的靜態文件目錄的轉發(這里假設我的靜態文件在public/static下)、修改vue的nginx配置。

        我們以在我本地的開發環境為例,windows7+nginx+Vue+Laravel5,假設我想使用的域名是zh30.com。

        想達成的效果:我們想直接訪問時使用Vue開發的單頁面應用index.html,做為我們的前臺交互,且在Vue中使用history路由模式。后臺和接口使用laravel框架進行開發,所以想使用zh30.com/admin 來訪問后臺管理,接口交互想使用zh30.com/api/xxx。

        第一步,本地解析hosts,zh30.com指向到127.0.0.1 。。。。

        第二步,配置nginx的主server,它用來接受我們zh30.com的所有請求,并進行代理轉發。

        server { listen 80; server_name zh30.com; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://127.0.0.1:8181; } location ~ ^/(admin|api|static) { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://127.0.0.1:8282; }}

        第三步,配置Vue的server,這里假設我的Vue項目build在D:/wwwroot/myvueproject/dist目錄。此server的作用是,把從主server 8181代理過來的請求全部rewrite到index.html,以支持Vue的history模式路由。

        server { listen 8181; root "D:/wwwroot/myvueproject/dist"; index index.html; server_name localhost; location / { try_files $uri $uri/ /index.html =404; }}

        第四步,配置Laravel的server,假設laravel項目在D:/wwwroot/mylaravelproject/。此server的作用是,把從主server 8282代理來的請求(以/admin或/api開頭),全部rewrite到public的index.php,實現laravel的路由系統。

        server { listen 8282; server_name localhost; root "D:/wwwroot/mylaravelproject/public"; index index.php; location / { try_files $uri $uri/ /index.php$is_args$args; } location ~ \.php(.*)$ { fastcgi_pass 127.0.0.1:9001; fastcgi_index index.php; fastcgi_split_path_info ^((?U).+\.php)(/?.+)$; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info; include fastcgi_params; }}

        第五步,重啟Nginx,完成!

        可能遇到的問題:暫無。。。

        ? ? ? ?

        本文采用知識共享署名-非商業性使用 3.0 中國大陸許可協議進行許可,轉載時請注明出處及相應鏈接。

        本文永久鏈接: http://www.twogeaux.com/nginx-proxy-laravel-vue-history.html

        使用Nginx反向代理部署laravel和history模式的Vue項目[更新]:目前有2 條留言

        用戶評論頭像 婚書網發表于 2019年12月02日 14:50[回復]

        已加入收藏夾,時不時的來看看有沒有更新博文!

          用戶評論頭像 阿斯蒂芬發表于 2020年01月23日 18:52[回復]

          測試一下

        發表評論

        change vcode

        欧美一级特黄啪啪片免费_欧美大黑bbb_欧美va天堂在线影院_一级欧美黑人大战白妞
        <acronym id="klsvp"></acronym>

        <object id="klsvp"><strong id="klsvp"><small id="klsvp"></small></strong></object>
      2. <p id="klsvp"><del id="klsvp"><small id="klsvp"></small></del></p>
        <big id="klsvp"><ruby id="klsvp"></ruby></big>
        <acronym id="klsvp"></acronym>