如何利用Nginx處理Vue的開發環境

1. 需求

本地測試網域與線上網域相同，以便正確傳遞 cookie 和進行 sso 測試。

附註：由於 sso 登入後，相關 cookie 被加在四級網域上，因而需要做到本地測試網域和線上介面網域相同。

2. 方案

設定host 檔案讓線上網域名稱指向localhost：

127.0.0.1 product.xxx. xxx.com

設定nginx 進行對應轉送：

server {
  listen    80;
  listen    [::]:80;
  server_name ${product.xxx.xxx.com};

  location /api {
    proxy_pass https://${ip.ip.ip.ip};
    proxy_set_header host $host;
  }

  location / {
    proxy_pass http://localhost:8080;
    proxy_set_header host $host;
  }  
}

設定vue.config.js 以免出現invalid host header 封包：

{
  devserver: {
    disablehostcheck: true
  }
}

以上是如何利用Nginx處理Vue的開發環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！