Nginx-UI 项目前端开发热重载配置指南

在基于 Nginx-UI 项目进行前端开发时，开发者可能会遇到修改前端代码后需要重新构建和重启服务才能看到效果的问题。本文将详细介绍如何配置前端开发环境以实现热重载功能，提升开发效率。

前端热重载的必要性

传统的前端开发流程中，每次代码修改后都需要手动重新构建并重启服务，这大大降低了开发效率。现代前端框架通常提供热模块替换(HMR)功能，能够在代码修改后自动更新浏览器中的内容，无需完全刷新页面。

配置步骤

1. 进入前端项目目录 首先需要进入项目中的前端代码目录，通常位于项目根目录下的 app 文件夹中。

2. 安装依赖 使用 pnpm 包管理器安装项目所需的前端依赖：

   pnpm install
   

3. 配置代理目标 在 app 目录下创建 .env 文件，并设置后端服务的代理地址：

   VITE_PROXY_TARGET=http://127.0.0.1:9001
   

   这一步骤至关重要，它确保前端开发服务器能够正确代理API请求到后端服务。

4. 启动开发服务器 执行以下命令启动Vite开发服务器：

   pnpm dev
   

工作原理

当执行上述配置后，系统会启动一个独立的开发服务器(默认运行在3002端口)。这个服务器具备以下特点：

1. 热模块替换：代码修改后会立即反映在浏览器中，无需手动刷新
2. API请求代理：通过配置的 VITE_PROXY_TARGET，所有API请求会被自动转发到后端服务
3. 快速反馈：开发过程中可以即时看到代码修改效果，大大缩短开发调试周期

常见问题解决

如果在配置过程中遇到无法登录的问题，并出现 ECONNREFUSED 127.0.0.1:9001 错误，通常是由于以下原因：

1. 后端服务未运行：确保已使用 go run main.go 启动了后端服务
2. 代理配置错误：检查 .env 文件中的 VITE_PROXY_TARGET 是否指向正确的后端地址和端口
3. 端口冲突：确认9001端口没有被其他程序占用

通过正确配置前端开发环境，开发者可以享受到现代前端工具链带来的高效开发体验，专注于业务逻辑的实现而非构建过程的等待。