在日常前端開發中，我們常常需要快速將本地的應用展示給局域網內的同事或測試人員，而傳統的共享方式往往效率不高。本文將指導你輕松地將你的純前端應用（無論是 Vue, React, Angular 或原生項目）部署到本地，并配置局域網訪問。

本文僅展示最簡單的部署

一、準備工作

1. 擁有一個純前端應用：
   • 可以是 Vue, React, Angular 或原生 HTML/CSS/JS 項目。
   • 確保應用已經通過 npm run build (或類似命令) 打包生成了靜態文件 (通常在 dist 或 build 目錄下)。本文用的是生成的dist文件。
2. 安裝 Nginx：
   • Windows: 從 Nginx 官網下載穩定版，解壓即可。
   • (可選) Linux/Mac: 簡述包管理器安裝命令 (如 apt install nginx, brew install nginx)。
   • 驗證 Nginx 是否安裝成功 (啟動 Nginx，訪問 http://localhost)。
3. 了解你的本地 IP 地址：
   • Windows: ipconfig 命令。
   • Linux/Mac: ifconfig 或 ip addr 命令。

二、配置Nginx

2.1 新建項目文件夾

為方便管理，你可以在 Nginx 的安裝目錄下創建一個專門存放Web應用的文件夾。

例如，如果你的 Nginx 解壓在 D:\nginx：

1. 在 D:\nginx 目錄下新建 html 文件夾 (如果Nginx解壓后自帶了此目錄，可直接使用)。
2. 在 D:\nginx\html 中再創建一個項目名文件夾，例如 lowcode。
3. 將你前端項目打包生成的 dist 文件夾整個放入 D:\nginx\html\lowcode\ 中。
   最終 dist 文件夾的路徑示例：D:\nginx\html\lowcode\dist

2.2 修改nginx.conf

配置示例

# ...默認代碼
http {#...默認代碼server {listen       8012; # 監聽端口，避免與常用的8080等端口沖突server_name  localhost;location /lowcode/ { # 配置低代碼應用的訪問路徑alias   D:/nginx/html/lowCode/dist/; # 指定低代碼應用的靜態文件路徑index  index.html index.htm; # 指定默認頁面try_files $uri $uri/ /lowcode/index.html; # 對于單頁面應用 (SPA)，此配置確保刷新或直接訪問子路由時能正確加載}#...默認代碼}
}

2.3 啟動與測試nginx

1. 啟動 Nginx (Windows 為例)：
   • 執行 start nginx 或 nginx.exe。
2. 常用 Nginx 命令：
   • nginx -s stop: 停止nginx
   • nginx -s reload: 重新加載配置文件 (修改配置后使用)
   • nginx -t: 測試配置文件是否有語法錯誤
3. 本地及局域網測試：
   • 本機測試： 在瀏覽器中訪問 http://localhost:訪問端口/訪問路徑/。
   • 局域網測試： 在同一局域網內的其他設備上，瀏覽器訪問 http://你的本機IP地址:訪問端口/訪問路徑/ (例如 http://192.168.1.105:8012/lowcode/)。
   • 確認應用能正常顯示和操作。

三、總結

通過以上幾個簡單步驟，你的純前端應用就能借助Nginx在本地成功部署，并實現局域網共享。Nginx的功能遠不止于此，它還可以用于反向代理、負載均衡等多種場景。希望本文能為你的日常開發工作帶來啟發。