這篇文章主要講解了“如何利用Nginx處理Vue的開發(fā)環(huán)境”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何利用Nginx處理Vue的開發(fā)環(huán)境”吧！

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計(jì),樂亭網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:樂亭等地區(qū)。樂亭做網(wǎng)站價(jià)格咨詢:13518219792

1. 需求

本地測試域名與線上域名相同，以便正確傳遞 cookie 和進(jìn)行 sso 測試。

注：由于 sso 登錄后，相關(guān) cookie 被加在四級域名上，因而需要做到本地測試域名和線上接口域名相同。

2. 方案

配置 host 文件使線上域名指向 localhost：

127.0.0.1 product.xxx.xxx.com

配置 nginx 進(jìn)行對應(yīng)轉(zhuǎn)發(fā)：

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 以免出現(xiàn) invalid host header 報(bào)錯(cuò)：

{
  devserver: {
    disablehostcheck: true
  }
}

感謝各位的閱讀，以上就是“如何利用Nginx處理Vue的開發(fā)環(huán)境”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何利用Nginx處理Vue的開發(fā)環(huán)境這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！