网站怎样做的有吸引力微企点做网站视频

数字化工厂中央控制室驾驶舱系统 - Windows 部署笔记

环境准备

这篇笔记记录了我在 Windows 10/11 上部署数字化工厂中央控制室驾驶舱系统的全过程，包括各种常见问题的解决方法。部署过程中使用了国内镜像源来加快下载速度。

前置需求

• Python：3.8 到 3.11 版本（我用的是 3.11.4）
• Node.js：v16 LTS 或 v18 LTS（我用的是 v18.19.0）
• VSCode：代码编辑和终端使用

步骤一：系统解压与目录设置

1. 将 DigitalFactoryDashboard.zip 解压到合适的路径

   例如：C:\Projects\DigitalFactoryDashboard
   

2. 打开 VSCode，选择 “File” > “Open Folder”，选择解压出来的 DigitalFactoryDashboard 文件夹

步骤二：后端环境配置

1. 打开 VSCode 中的终端（快捷键：Ctrl + `）

2. 进入后端目录

   cd DigitalFactoryDashboard/backend
   

3. 创建并激活 Python 虚拟环境（推荐，但不强制）

   python -m venv venv
   # 激活虚拟环境
   venv\Scripts\activate
   

   激活后你会看到终端提示符前面多了 (venv)，表示已进入虚拟环境。

4. 使用清华源配置 pip（加速依赖下载）

   pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
   

5. 安装后端依赖

   pip install -r requirements.txt
   

   可能出现的问题和解决方法：

   • 问题1：找不到某些包

     ERROR: Could not find a version that satisfies the requirement...
     

     解决方法：尝试单独安装关键包

     pip install fastapi==0.103.1 uvicorn==0.23.2 sqlalchemy==2.0.20 pandas==2.1.0 python-socketio==5.8.0
     

   • 问题2：下载超时

     ReadTimeoutError: HTTPSConnectionPool(host='pypi.org'...
     

     解决方法：增加超时时间重试

     pip install -r requirements.txt --timeout 300
     

   • 问题3：依赖冲突
     解决方法：创建新的虚拟环境，确保干净的安装环境

     deactivate  # 如果在虚拟环境中
     rd /s /q venv  # 删除旧虚拟环境
     python -m venv venv  # 创建新虚拟环境
     venv\Scripts\activate
     pip install -r requirements.txt
     

步骤三：前端环境配置

1. 打开一个新的 VSCode 终端，进入前端目录

   cd DigitalFactoryDashboard/frontend
   

2. 配置 npm 使用淘宝镜像源（加速依赖下载）

   npm config set registry https://registry.npmmirror.com
   

3. 安装前端依赖

   npm install
   

   可能出现的问题和解决方法：

   • 问题1：node_modules 损坏或依赖冲突

     Error: Cannot find module 'xxx'
     

     解决方法：清除缓存并重新安装

     # 删除 node_modules 和 lock 文件
     rmdir /s /q node_modules
     del package-lock.json# 清理 npm 缓存
     npm cache clean --force# 重新安装
     npm install
     

   • 问题2：tapable 模块丢失

     Error: Cannot find module 'C:\...\node_modules\tapable\lib\index.js'
     

     解决方法：单独安装 tapable 模块

     npm install tapable
     

     然后重新安装所有依赖

     npm install
     

   • 问题3：Node.js 版本不兼容
     解决方法：使用 Node.js v16 LTS 或 v18 LTS 版本，避免使用 v17 或最新的 v20 版本，因为有些依赖可能尚未兼容

   • 问题4：Yarn 替代方案
     如果 npm 安装反复出错，可以尝试 Yarn：

     npm install -g yarn
     yarn
     

步骤四：启动后端服务

1. 在 VSCode 终端中，确保你在后端目录，并且虚拟环境已激活

   cd DigitalFactoryDashboard/backend
   venv\Scripts\activate  # 如果还没有激活虚拟环境
   

2. 启动后端服务

   python run.py
   

   成功启动后，你会看到类似以下输出：

   INFO:     Started server process [12345]
   INFO:     Waiting for application startup.
   INFO:     Application startup complete.
   INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
   

   注意：保持这个终端窗口运行，不要关闭它。

   可能出现的问题和解决方法：

   • 问题1：端口冲突

     ERROR: [Errno 10013] Permission denied
     

     解决方法：可能是端口 8000 被占用，修改 run.py 文件中的端口号

     # 约在文件末尾找到这行
     uvicorn.run(app, host="0.0.0.0", port=8000)# 改为其他端口，例如
     uvicorn.run(app, host="0.0.0.0", port=8001)
     

   • 问题2：模块引入错误

     ModuleNotFoundError: No module named 'xxx'
     

     解决方法：检查是否忘记安装某些依赖，或者尝试单独安装缺失模块

     pip install 模块名
     

步骤五：启动前端服务

1. 在 VSCode 中打开新终端，进入前端目录

   cd DigitalFactoryDashboard/frontend
   

2. 启动前端开发服务器

   npm start
   

   成功启动后，浏览器会自动打开 http://localhost:3000，展示应用界面。

   可能出现的问题和解决方法：

   • 问题1：与后端连接失败
     如果前端无法连接到后端服务，检查 package.json 文件中的 proxy 设置：

     "proxy": "http://localhost:8000"
     

     确保这里的端口号与后端运行的端口一致。

   • 问题2：JavaScript 堆内存不足

     FATAL ERROR: Reached heap limit
     

     解决方法：增加 Node.js 内存限制

     set NODE_OPTIONS=--max_old_space_size=4096
     npm start
     

   • 问题3：缺少浏览器兼容性文件

     Error: Cannot find module 'browserslist'
     

     解决方法：

     npx browserslist@latest --update-db
     

性能优化建议

1. 降低 3D 和动画密度：如果系统运行缓慢，可在 src/components/charts/ 目录下相关文件中调整参数

2. 关闭 ESLint 警告：如果开发阶段遇到大量 ESLint 警告，可以在 .eslintrc.js 添加规则：

   rules: {'no-unused-vars': 'off','react-hooks/exhaustive-deps': 'off'
   }
   

3. 使用生产构建：实际部署环境使用生产构建而非开发服务器

   cd frontend
   npm run build
   # 然后使用 serve 或其他静态文件服务器
   npx serve -s build
   

测试系统

前后端都启动后，访问 http://localhost:3000，你应该能看到系统仪表盘。测试以下功能确认系统正常工作：

1. 实时数据刷新
2. 设备状态监控
3. 生产线效率图表
4. 报警信息显示

常见问题总结

1. 前后端无法连接

   • 检查后端是否正常运行在 http://localhost:8000
   • 检查前端 package.json 中 proxy 设置是否正确
   • 检查Windows防火墙是否阻止了通信

2. 页面加载速度慢

   • 检查网络连接
   • 可能是首次加载资源较多，刷新后应该会加快
   • 尝试减少 3D 模型和动画效果

3. 数据不更新

   • 检查后端控制台是否有错误信息
   • 可能是 WebSocket 连接失败，检查网络设置

4. 打包和部署问题

   • 生产环境部署时，如需修改后端地址，须在前端构建前修改 .env 文件

更新日志

最后更新于 2025-05-05