如何利用Nginx處理Vue的開發環境-Nginx-PHP中文網

首頁

運維

Nginx

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

PHPz

May 20, 2023 pm 05:16 PM

vue nginx

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Related knowledge

如何管理VUE項目中的環境變量 Aug 22, 2025 am 11:38 AM

環境變量管理在Vue項目中至關重要，需根據構建工具選擇正確方式。 1.VueCLI項目使用VUE_APP_前綴的.env文件，通過process.env.VUE_APP_訪問，如.env.production；2.Vite項目使用VITE_前綴，通過import.meta.env.VITE_訪問，如.env.staging；3.兩者均支持自定義模式加載對應文件，且應將.env.local類文件加入.gitignore；4.始終避免在前端暴露敏感信息，提供.env.example供參考，並在運行時校

如何在VUE中實現暗模式主題切換器 Aug 02, 2025 pm 12:15 PM

創建一個主題切換組件，使用複選框綁定isDarkMode狀態並調用toggleTheme函數；2.在onMounted中檢查localStorage和系統偏好設置初始化主題；3.定義applyTheme函數將dark-mode類應用到html元素以切換樣式；4.使用CSS自定義屬性定義亮色和暗色變量，並通過dark-mode類覆蓋默認樣式；5.將ThemeSwitcher組件引入主應用模板中以顯示切換按鈕；6.可選地監聽prefers-color-scheme變化以同步系統主題。該方案利用Vue

如何使用nginx部署Django應用程序？ Aug 23, 2025 pm 04:26 PM

部署Django應用需配置生產環境、Gunicorn和Nginx反向代理。 1.設置DEBUG=False，配置ALLOWED_HOSTS，定義STATIC_ROOT並運行collectstatic收集靜態文件。 2.安裝Gunicorn並測試運行，確認無誤後通過systemd管理服務。 3.創建systemd服務文件配置Gunicorn以Unix套接字啟動，設置正確路徑和用戶後啟用服務。 4.安裝Nginx並創建站點配置，指定server_name，配置/static/路徑指向靜態文件目錄，其餘請求通

如何在VUE中創建模態或對話框組件？ Aug 02, 2025 am 03:00 AM

創建Modal.vue組件，使用CompositionAPI定義接收modelValue和title的props，並通過emit觸發update:modelValue事件實現v-model雙向綁定；2.在模板中使用slot分發內容，支持默認插槽及具名插槽header和footer；3.通過@click.self實現點擊遮罩層關閉彈窗；4.在父組件中導入Modal並用ref控制顯示隱藏，結合v-model使用；5.可選增強功能包括監聽Escape鍵關閉、添加過渡動畫和焦點鎖定。該模態框組件具有良好

如何將第三方庫集成到VUE項目中 Aug 30, 2025 am 02:53 AM

install install installtheLibraryIsingnpMoryarn.2.importlocallocallocallocalentsforoccasionaluse.3.useapp.use（）

使用NGINX作為API網關有什麼好處？ Aug 31, 2025 am 09:17 AM

Nginx作為API網關具有高性能、低延遲、負載均衡、安全控制等優勢，1.採用事件驅動架構，支持高並發、低資源消耗，提升API響應速度；2.支持多種負載均衡策略及健康檢查，保障服務高可用；3.可基於路徑、域名等規則路由並重寫URL，便於API版本管理；4.提供限流、IP控制、JWT驗證和SSL終止等安全機制，防禦惡意請求；5.支持響應緩存，減輕後端壓力，提升讀密集型API性能；6.可定制日誌格式，便於與ELK、Grafana等監控系統集成；7.支持HTTP/2、HTTP/3和WebSocket，

如何使用NGINX中的GZIP設置內容壓縮？ Aug 30, 2025 am 07:51 AM

enablegzipbyAddingDirectivesLikeGzipon; andSpecifiefinggzip_typesIncludingText/csssandapplication/javaScript; 2.TestConfigurationw ithsudonginx-tandreloadwithsudosystemctlreloadnginx; 3.VerifyCompressionCurltoCheckForContent-necoding-regoting：gzipandvary：cackect

什麼是NGINX SSL終止？ Sep 16, 2025 am 06:55 AM

NginxSSL終止是指Nginx在接收客戶端HTTPS請求後解密流量，並將解密後的HTTP請求轉發給後端服務器。 1.Nginx作為反向代理，在443端口接收加密請求，使用SSL證書和私鑰解密數據。 2.解密後，Nginx將請求通過HTTP或內部HTTPS轉發至後端服務。 3.後端響應經Nginx返回，必要時重新加密。優勢包括：提升性能，將耗CPU的解密任務從後端卸載到高效處理連接的Nginx；集中管理證書，簡化更新流程；增強靈活性，支持在解密流量上啟用HTTP/2、壓縮、緩存和負載均衡；簡化後端配

See all articles

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

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題