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

我們以在我本地的開發(fā)環(huán)境為例，windows7+nginx+Vue+Laravel5，假設(shè)我想使用的域名是zh30.com。

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

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

第二步，配置nginx的主server，它用來接受我們zh30.com的所有請求，并進行代理轉(zhuǎn)發(fā)。

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，這里假設(shè)我的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，假設(shè)laravel項目在D:/wwwroot/mylaravelproject/。此server的作用是，把從主server 8282代理來的請求（以/admin或/api開頭），全部rewrite到public的index.php，實現(xiàn)laravel的路由系統(tǒng)。

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，完成！

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