全开源数字孪生系统搭建方案：全套技术文档

hdsoft_huge2026-05-28 14:26

文章目录

  • 数字孪生系统开源技术栈全套技术文档
  • 一、三维建模核心工具栈
    • [1.1 Blender](#1.1 Blender)
      • [1.1.1 软件介绍](#1.1.1 软件介绍)
      • [1.1.2 软件界面](#1.1.2 软件界面)
      • [1.1.3 数字孪生核心使用功能](#1.1.3 数字孪生核心使用功能)
      • [1.1.4 官方文档地址](#1.1.4 官方文档地址)
    • [1.2 QGIS](#1.2 QGIS)
      • [1.2.1 软件介绍](#1.2.1 软件介绍)
      • [1.2.2 软件界面](#1.2.2 软件界面)
      • [1.2.3 数字孪生核心使用功能](#1.2.3 数字孪生核心使用功能)
      • [1.2.4 官方文档地址](#1.2.4 官方文档地址)
    • [1.3 IfcOpenShell](#1.3 IfcOpenShell)
      • [1.3.1 软件介绍](#1.3.1 软件介绍)
      • [1.3.2 软件界面](#1.3.2 软件界面)
      • [1.3.3 数字孪生核心使用功能](#1.3.3 数字孪生核心使用功能)
      • [1.3.4 官方文档地址](#1.3.4 官方文档地址)
  • 二、模型格式与优化技术
    • [2.1 glTF/GLB 模型格式](#2.1 glTF/GLB 模型格式)
      • [2.1.1 格式介绍](#2.1.1 格式介绍)
    • [2.2 Draco 开源模型压缩算法](#2.2 Draco 开源模型压缩算法)
      • [2.2.1 算法介绍](#2.2.1 算法介绍)
    • [2.3 主流格式转换工具介绍](#2.3 主流格式转换工具介绍)
  • 三、数据接入与传输技术栈
    • [3.1 EMQ X（开源MQTT消息中间件）](#3.1 EMQ X（开源MQTT消息中间件）)
      • [3.1.1 工具介绍](#3.1.1 工具介绍)
      • [3.1.2 性能与优势](#3.1.2 性能与优势)
      • [3.1.3 数字孪生核心功能](#3.1.3 数字孪生核心功能)
      • [3.1.4 官方文档地址](#3.1.4 官方文档地址)
    • [3.2 OPC UA Stack（工业协议解析）](#3.2 OPC UA Stack（工业协议解析）)
      • [3.2.1 工具介绍](#3.2.1 工具介绍)
      • [3.2.2 性能与优势](#3.2.2 性能与优势)
      • [3.2.3 数字孪生核心功能](#3.2.3 数字孪生核心功能)
      • [3.2.4 官方文档地址](#3.2.4 官方文档地址)
    • [3.3 Modbus Slave（设备数据采集）](#3.3 Modbus Slave（设备数据采集）)
      • [3.3.1 工具介绍](#3.3.1 工具介绍)
      • [3.3.2 性能与优势](#3.3.2 性能与优势)
      • [3.3.3 数字孪生核心功能](#3.3.3 数字孪生核心功能)
  • 四、数据存储与仿真计算技术栈
    • [4.1 InfluxDB（时序数据库）](#4.1 InfluxDB（时序数据库）)
      • [4.1.1 工具介绍](#4.1.1 工具介绍)
      • [4.1.2 数字孪生核心功能](#4.1.2 数字孪生核心功能)
      • [4.1.3 官方文档地址](#4.1.3 官方文档地址)
    • [4.2 MySQL（业务数据库）](#4.2 MySQL（业务数据库）)
      • [4.2.1 工具介绍](#4.2.1 工具介绍)
      • [4.2.2 数字孪生核心功能](#4.2.2 数字孪生核心功能)
      • [4.2.3 官方文档地址](#4.2.3 官方文档地址)
    • [4.3 Python Scipy（物理仿真计算）](#4.3 Python Scipy（物理仿真计算）)
      • [4.3.1 工具介绍](#4.3.1 工具介绍)
      • [4.3.2 数字孪生核心功能](#4.3.2 数字孪生核心功能)
      • [4.3.3 官方文档地址](#4.3.3 官方文档地址)
  • 五、三维渲染引擎技术栈
    • [5.1 Three.js](#5.1 Three.js)
      • [5.1.1 工具介绍](#5.1.1 工具介绍)
      • [5.1.2 性能](#5.1.2 性能)
      • [5.1.3 使用方式](#5.1.3 使用方式)
      • [5.1.4 官方文档地址](#5.1.4 官方文档地址)
    • [5.2 OpenTwin](#5.2 OpenTwin)
      • [5.2.1 工具介绍](#5.2.1 工具介绍)
      • [5.2.2 性能](#5.2.2 性能)
      • [5.2.3 使用方式](#5.2.3 使用方式)
      • [5.2.4 官方文档地址](#5.2.4 官方文档地址)
  • [六、前端可视化技术栈 WebStorm项目搭建](#六、前端可视化技术栈 WebStorm项目搭建)
    • [6.1 Vue3+Element Plus（页面框架）](#6.1 Vue3+Element Plus（页面框架）)
      • [6.1.1 技术介绍](#6.1.1 技术介绍)
      • [6.1.2 性能优势](#6.1.2 性能优势)
      • [6.1.3 使用方式](#6.1.3 使用方式)
      • [6.1.4 官方文档地址](#6.1.4 官方文档地址)
    • [6.2 ECharts/AntV（数据可视化图表）](#6.2 ECharts/AntV（数据可视化图表）)
      • [6.2.1 技术介绍](#6.2.1 技术介绍)
      • [6.2.2 性能与使用方式](#6.2.2 性能与使用方式)
      • [6.2.3 官方文档地址](#6.2.3 官方文档地址)
    • [6.3 WebStorm 创建 Vue3\+Element Plus\+Three.js\+ECharts 集成项目教程](#6.3 WebStorm 创建 Vue3+Element Plus+Three.js+ECharts 集成项目教程)
      • [6.3.1 环境准备](#6.3.1 环境准备)
      • [6.3.2 项目创建步骤](#6.3.2 项目创建步骤)
  • 七、部署环境与1Panel可视化部署教程
    • [7.1 部署工具介绍](#7.1 部署工具介绍)
      • [7.1.1 Docker容器化部署](#7.1.1 Docker容器化部署)
      • [7.1.2 Nginx静态资源托管](#7.1.2 Nginx静态资源托管)
    • [7.2 Ubuntu+1Panel 整体部署方案](#7.2 Ubuntu+1Panel 整体部署方案)
      • [7.2.1 1Panel安装（Ubuntu系统）](#7.2.1 1Panel安装（Ubuntu系统）)
      • [7.2.2 1Panel部署核心服务](#7.2.2 1Panel部署核心服务)
    • [7.3 整体部署架构](#7.3 整体部署架构)

数字孪生系统开源技术栈全套技术文档

本文档系统性梳理数字孪生Web端开源全套技术栈，涵盖三维建模工具、模型格式优化、工业数据接入传输、数据存储与仿真计算、Web3D渲染引擎、前端可视化框架、服务器部署运维七大核心模块，同时包含完整的Vue3集成项目搭建教程与1Panel可视化部署流程，为轻量化、开源化数字孪生系统开发、落地、部署提供全套技术支撑。

一、三维建模核心工具栈

本模块工具主要用于数字孪生场景的三维地形、建筑、设备模型搭建、BIM模型解析、模型轻量化烘焙，是数字孪生三维场景的数据源核心。

1.1 Blender

1.1.1 软件介绍

Blender是一款免费开源、跨平台的全能三维创作软件，支持Windows、MacOS、Linux系统，涵盖三维建模、材质烘焙、灯光渲染、模型拓扑优化、动画制作、轻量化处理等全流程功能。无商业版权限制，完全适配开源数字孪生项目开发，是中小规模数字孪生场景模型制作的主流工具。

1.1.2 软件界面

标准界面包含菜单栏、工具栏、3D视口、属性面板、材质编辑器、UV编辑窗口、时间轴等核心模块，支持自定义工作区，可针对建模、烘焙、轻量化等不同工作场景切换专属布局，操作灵活、轻量化、硬件适配性强。

1.1.3 数字孪生核心使用功能

  • 三维建模：搭建工业设备、建筑楼宇、园区场景、机械构件等数字孪生三维模型，支持高精度精细化建模与低模简模快速搭建。

  • 模型烘焙：支持法线烘焙、AO环境光烘焙、材质烘焙，将高精度模型的光影、材质信息烘焙至贴图，实现模型效果无损简化。

  • 模型轻量化处理：自动减面、拓扑重构、冗余顶点删除、模型合并拆分，大幅降低模型面数与文件体积，适配Web端实时渲染需求。

  • 多格式导出：支持导出glTF/GLB、FBX、OBJ等Web数字孪生通用模型格式，适配Three.js等前端渲染引擎。

1.1.4 官方文档地址

blender中国社区主页：https://www.blendercn.org/downloadme

官方中文文档：https://docs.blender.org/manual/zh-hans/latest/

1.2 QGIS

1.2.1 软件介绍

QGIS是一款开源免费的专业GIS地理信息系统软件，支持地理数据读取、编辑、分析、建模，兼容绝大多数地理数据格式，广泛应用于智慧城市、园区、地形地貌类数字孪生场景搭建，是地理场景数字孪生的核心工具。

1.2.2 软件界面


界面由图层管理器、地图视口、属性查询面板、工具栏、地理处理工具箱组成，支持多图层叠加、地理坐标校准、矢量/栅格数据编辑，操作可视化、零基础易上手。

1.2.3 数字孪生核心使用功能

  • GIS地形建模：导入DEM高程数据生成真实地形地貌，构建山地、园区、城市地形三维基础场景。

  • 地理场景建模：加载道路、建筑、水系、植被等矢量地理数据，快速搭建真实地理拓扑的数字孪生场景基底。

  • 地理数据预处理：坐标转换、数据裁剪、图层合并、冗余数据剔除，为Web端地理孪生渲染提供标准化数据。

  • 地理数据导出：导出适配三维引擎的地理数据格式，对接Blender、Three.js完成地理场景三维可视化。

1.2.4 官方文档地址

QGIS 中文社区：https://www.qgiscn.com/

中文教程：https://www.qgiscn.com/tutorial/

1.3 IfcOpenShell

1.3.1 软件介绍

IfcOpenShell是一款开源的BIM模型解析与转换工具库，专注于IFC标准BIM模型的读取、解析、格式转换，解决传统BIM模型无法直接适配Web数字孪生系统的问题，无版权收费，是开源项目BIM模型轻量化接入的核心组件。

1.3.2 软件界面



核心以命令行工具、Python库接口为主，附带简易可视化预览工具，无复杂图形界面，主打轻量化、脚本化批量处理BIM模型，适配自动化项目流程。

1.3.3 数字孪生核心使用功能

  • BIM模型开源解析：完整解析IFC格式建筑、工业BIM模型的构件、材质、层级、属性数据。

  • 模型格式转换：将超大体积的IFC模型批量转换为glTF/GLB、OBJ、FBX等Web轻量化格式。

  • BIM数据提取：提取构件尺寸、设备参数、施工属性等业务数据，关联数字孪生可视化场景。

  • 批量轻量化处理：支持脚本批量处理BIM模型，适配大型园区、建筑数字孪生项目的模型批量接入。

1.3.4 官方文档地址

官网主页： https://ifcopenshell.org/

官方仓库：https://github.com/IfcOpenShell/IfcOpenShell

二、模型格式与优化技术

数字孪生Web端渲染对模型体积、加载速度、帧率要求极高，本模块为Web标准模型格式与开源压缩优化方案，是保障三维场景流畅运行的关键。

2.1 glTF/GLB 模型格式

2.1.1 格式介绍

glTF（GL Transmission Format）是Khronos集团推出的Web端标准三维模型格式，专为Web三维渲染设计，具备轻量化、加载快、兼容性强的特点。GLB是glTF的二进制封装格式，将模型、贴图、材质文件整合为单一文件，传输和使用更便捷，是当前数字孪生Web项目的首选模型格式。

核心优势：跨引擎兼容、JSON结构化数据、二进制压缩、加载速度远超FBX/OBJ，原生支持Three.js、OpenTwin等所有Web3D引擎。

2.2 Draco 开源模型压缩算法

2.2.1 算法介绍

Draco是Google开源的三维几何模型压缩算法，专门针对模型顶点、法线、UV坐标等几何数据进行高效压缩，可在几乎无损画质的前提下，将glTF/GLB模型体积压缩30%-70%，大幅降低Web端模型加载时间、减少带宽占用和内存占用。

适配场景：数字孪生大型场景、高精度设备模型、地形模型的Web端轻量化压缩。

2.3 主流格式转换工具介绍

  • Blender：支持FBX、OBJ、IFC转glTF/GLB，内置Draco压缩插件，一站式完成模型格式转换+压缩轻量化。

  • IfcOpenShell：专注IFC BIM模型批量转glTF/GLB，适配建筑孪生模型转换。

  • gltf-pipeline：开源命令行工具，支持批量glTF/GLB模型Draco压缩、格式优化、贴图压缩，适合自动化部署流程。

  • Three.js Editor：在线可视化模型转换工具，支持各类三维格式互转、轻量化压缩，适合快速调试。

三、数据接入与传输技术栈

本模块为数字孪生系统设备数据采集、工业协议解析、实时消息传输核心组件，实现现场设备与可视化平台的数据互通。

3.1 EMQ X（开源MQTT消息中间件）

3.1.1 工具介绍

EMQ X是一款高性能、开源的MQTT消息服务器，专为物联网、工业设备数据传输设计，支持百万级并发连接，是数字孪生系统设备实时消息推送、上下行数据传输的核心中间件。

3.1.2 性能与优势

  • 高性能：单节点支持百万级设备并发连接，毫秒级消息推送延迟；

  • 高可靠：支持消息持久化、断线重连、QoS消息质量保障，杜绝设备数据丢失；

  • 轻量开源：社区版完全免费，支持Docker容器化部署，资源占用低；

  • 多协议兼容：兼容MQTT、MQTT-SN、WebSocket等协议，支持Web端直接订阅数据。

3.1.3 数字孪生核心功能

  • 工业设备实时状态数据、传感器数据的上行接收；

  • 数字孪生平台下发控制指令、参数配置指令至现场设备；

  • 设备数据实时广播，驱动三维场景设备状态联动、数据刷新；

  • 设备在线状态监测、异常消息推送告警。

3.1.4 官方文档地址

官方中文主页：https://www.emqx.com/zh

官方中文文档：https://docs.emqx.com/zh/

3.2 OPC UA Stack（工业协议解析）

3.2.1 工具介绍

OPC UA Stack是开源的OPC UA工业协议解析栈，是工业自动化领域通用的数据交互标准，可实现PLC、工控机、工业传感器等各类工业设备的数据标准化解析与对接，解决不同品牌工业设备协议不统一的问题。

3.2.2 性能与优势

  • 标准化：兼容国际工业通用OPC UA协议，适配绝大多数工业现场设备；

  • 跨平台：支持Windows/Linux，可嵌入Python、Java后端项目；

  • 高安全：支持加密传输、权限校验，适配工业生产安全需求；

  • 开源免费：无商业授权限制，适合私有化部署的数字孪生项目。

3.2.3 数字孪生核心功能

  • 解析工业PLC、变频器、传感器等设备的原始工业数据；

  • 将非标工业设备数据标准化，对接MQTT中间件与数据库；

  • 实时采集设备运行参数、故障状态、能耗数据；

  • 实现数字孪生系统与工业现场设备的双向数据交互。

3.2.4 官方文档地址

开源协议栈文档：https://open62541.org/

3.3 Modbus Slave（设备数据采集）

3.3.1 工具介绍

Modbus Slave是基于Modbus协议的从站模拟与数据采集工具，支持Modbus RTU/TCP协议，广泛应用于低端传感器、仪表、小型工控设备的数据采集，是工业现场最通用、轻量化的数据采集方案。

3.3.2 性能与优势

  • 极简高效：协议轻量、传输延迟极低，适合高频小型设备数据采集；

  • 兼容性极强：90%以上的小型工业传感器、仪表均支持Modbus协议；

  • 部署简单：无需复杂配置，快速搭建设备数据采集链路；

  • 资源占用低：可批量挂载数十至上百台设备采集数据。

3.3.3 数字孪生核心功能

  • 温湿度、压力、流量、电表、水表等物联网传感器数据采集；

  • 小型工控设备运行状态、参数的实时读取；

  • 采集数据预处理后上传至EMQ X消息中间件；

  • 为数字孪生可视化、数据统计、告警分析提供原始数据源。

四、数据存储与仿真计算技术栈

本模块负责数字孪生系统实时设备数据存储、业务数据管理、物理仿真运算，实现数据持久化与场景仿真推演。

4.1 InfluxDB（时序数据库）

4.1.1 工具介绍

InfluxDB是一款开源、高性能的时序数据库，专门针对时间序列数据优化设计，相比传统关系型数据库，在海量设备实时数据写入、查询、存储方面性能碾压，是物联网、数字孪生、工业监控场景的专用数据库。

4.1.2 数字孪生核心功能

  • 存储传感器、工业设备的实时时序数据（温度、能耗、转速、压力等）；

  • 支持海量高频数据秒级写入，适配百万级数据日增量场景；

  • 快速查询历史时序数据，支撑数据曲线回放、历史追溯、趋势分析；

  • 支持数据过期清理、自动分片存储，降低服务器存储压力。

4.1.3 官方文档地址

官方文档：https://influxdb.org.cn/products/influxdb/

4.2 MySQL（业务数据库）

4.2.1 工具介绍

MySQL是开源稳定的关系型数据库，成熟稳定、运维简单、生态完善，是Web系统通用的业务数据存储数据库，适配数字孪生系统的非时序结构化数据存储。

4.2.2 数字孪生核心功能

  • 存储系统业务数据：用户账号、权限、角色、菜单配置；

  • 存储设备基础信息、场景配置、告警规则、日志记录；

  • 存储项目台账、运维记录、报表统计业务数据；

  • 为前端页面、后台管理系统提供结构化数据查询支撑。

4.2.3 官方文档地址

官方文档：https://dev.mysql.com/doc/

4.3 Python Scipy（物理仿真计算）

4.3.1 工具介绍

Scipy是基于Python的开源科学计算库，内置海量物理运算、数值分析、仿真算法，支持流体力学、运动仿真、数据拟合、算法推演等计算能力，是数字孪生系统轻量化物理仿真的核心工具。

4.3.2 数字孪生核心功能

  • 物理仿真计算：设备运动轨迹仿真、流体流动仿真、热力扩散仿真、结构应力模拟；

  • 数据拟合与预测：基于历史设备数据，实现能耗预测、故障预判、趋势推演；

  • 数值分析处理：设备异常数据滤波、降噪、清洗，优化孪生数据精度；

  • 联动场景推演：通过仿真计算结果驱动三维场景动态变化，实现数字孪生虚实映射。

4.3.3 官方文档地址

官方文档：https://docs.scipy.org/

五、三维渲染引擎技术栈

三维渲染引擎是数字孪生Web可视化的核心，负责模型加载、场景渲染、交互逻辑、动画驱动，实现三维场景网页端无插件可视化。

5.1 Three.js

5.1.1 工具介绍

Three.js是目前全球最主流的开源Web3D渲染引擎，基于原生WebGL封装，无需浏览器插件，可直接在网页端实现三维模型加载、场景搭建、光照渲染、相机控制、模型交互、动画开发，生态极其完善，是绝大多数Web数字孪生项目的基础引擎。

5.1.2 性能

  • 轻量高效：引擎体积小、渲染性能优异，支持PC端、移动端适配；

  • 高兼容性：兼容所有现代浏览器，支持WebGL1.0/2.0；

  • 流畅渲染：支持千级面数模型场景流畅运行，支持帧率优化、遮挡剔除；

  • 插件丰富：内置Draco压缩加载、模型解析、光影特效、粒子特效插件。

5.1.3 使用方式

  • 通过npm安装集成至Vue3前端项目，模块化开发；

  • 原生CDN引入，快速搭建三维场景；

  • 结合glTF/GLB轻量化模型，实现场景加载、交互、数据联动；

  • 自定义封装场景管理、模型控制、弹窗交互、视角切换工具类。

5.1.4 官方文档地址

官方主页：https://threejs.org/

官方文档：https://threejs.org/docs/

中文网址： https://webgl3d.cn/

5.2 OpenTwin

5.2.1 工具介绍

OpenTwin是专门面向数字孪生场景的开源框架，基于Web3D技术封装，内置数字孪生专属场景管理、设备绑定、数据联动、图层控制、场景漫游等功能，相比原生Three.js，无需从零开发孪生基础逻辑，开箱即用，大幅提升开发效率。

5.2.2 性能

  • 针对性优化：专为数字孪生大屏、园区、工业场景优化渲染逻辑；

  • 低代码开发：封装通用孪生API，减少重复造轮子；

  • 稳定流畅：内置场景防抖、帧率自适应、模型懒加载机制；

  • 适配开源栈：完美兼容Three.js、glTF模型、Draco压缩格式。

5.2.3 使用方式

  • NPM引入框架，快速初始化数字孪生基础场景；

  • 调用内置API实现模型挂载、数据绑定、告警闪烁、状态变色；

  • 结合前端Vue框架，快速搭建孪生可视化大屏；

  • 支持二次开发，自定义扩展专属业务逻辑。

5.2.4 官方文档地址

官方仓库文档：https://github.com/opentwin/opentwin

六、前端可视化技术栈 WebStorm项目搭建

6.1 Vue3+Element Plus（页面框架）

6.1.1 技术介绍

Vue3是轻量、高性能的前端渐进式框架，相比Vue2具备更快的渲染速度、更低的内存占用、组合式API，适配大型可视化项目开发。Element Plus是基于Vue3的完整UI组件库，提供按钮、弹窗、表格、表单、布局、导航等全套后台与大屏组件，是数字孪生可视化系统首选前端框架组合。

6.1.2 性能优势

  • Vue3采用Proxy响应式原理，数据更新更快、渲染效率更高；

  • 组件按需引入，大幅减小项目打包体积；

  • 支持组件复用、逻辑封装，适配复杂孪生大屏页面；

  • Element Plus组件成熟稳定，适配后台管理、数据大屏、弹窗交互场景。

6.1.3 使用方式

基于Vite构建工具创建Vue3项目，全局/按需引入Element Plus组件，搭配路由、状态管理，搭建数字孪生前端页面框架，集成三维渲染与数据可视化图表。

6.1.4 官方文档地址

Vue3官方文档：https://cn.vuejs.org/

Element Plus官方文档：https://element-plus.org/zh-CN/

6.2 ECharts/AntV（数据可视化图表）


6.2.1 技术介绍

ECharts是百度开源的成熟数据可视化图表库，支持折线图、柱状图、饼图、仪表盘、地图、热力图等常用图表，适配数字孪生系统数据统计、实时监控、趋势展示。AntV是阿里开源的专业可视化解决方案，擅长复杂拓扑图、流程图、大数据可视化、3D数据图表，适配高端孪生大屏可视化效果。

6.2.2 性能与使用方式

  • ECharts：轻量稳定、配置简单、兼容性强，适合常规设备数据、能耗、告警数据展示；

  • AntV：渲染效果精美、支持大数据量渲染、拓扑关系可视化，适合园区设备拓扑、流程推演、大屏炫酷可视化场景；

  • 均可通过NPM集成至Vue3项目，绑定后端实时数据，实现图表动态刷新。

6.2.3 官方文档地址

ECharts官方文档：https://echarts.apache.org/zh/

AntV官方文档：https://antv.vision/

6.3 WebStorm 创建 Vue3+Element Plus+Three.js+ECharts 集成项目教程

6.3.1 环境准备

安装Node.js（16+版本）、WebStorm编辑器，配置npm环境

6.3.2 项目创建步骤

  1. 打开WebStorm，新建项目，选择「Vite」构建工具，框架选择「Vue」，版本选择「Vue3」；
  2. 初始化项目后，打开终端，执行依赖安装命令：
Plain 复制代码 
# 安装Element Plus
npm install element-plus

# 安装Three.js
npm install three

# 安装ECharts
npm install echarts

# 安装Vue路由
npm install vue-router@4

  1. 全局引入Element Plus，在main.js中配置全局挂载；

  2. 封装Three.js场景工具类，实现模型加载、场景初始化、相机控制；

  3. 页面引入ECharts，绑定后端实时数据接口，实现数据可视化；

  4. 配置路由，搭建首页、孪生大屏、数据监控、设备管理页面结构；

  5. 运行项目：npm run dev，完成集成项目初始化。

七、部署环境与1Panel可视化部署教程

7.1 部署工具介绍

7.1.1 Docker容器化部署

Docker是开源容器化部署工具，可将应用、依赖、环境打包为容器，实现跨环境一键部署、环境隔离、版本统一，解决服务器环境适配问题，是后端服务、数据库、中间件部署的核心工具。

7.1.2 Nginx静态资源托管

Nginx是高性能Web服务器，用于托管Vue打包后的静态前端资源，实现项目反向代理、负载均衡、静态资源加速、跨域配置，保障前端项目高速访问、稳定运行。

7.2 Ubuntu+1Panel 整体部署方案

1Panel是开源Linux服务器可视化运维面板，基于Docker实现一键安装、可视化管理应用、数据库、容器、网站，无需复杂命令行操作，大幅降低部署运维难度。

7.2.1 1Panel安装（Ubuntu系统）

执行官方一键安装命令，安装完成后通过面板地址、账号密码登录可视化后台。

也可以参考文章：
https://blog.csdn.net/hugejiletuhugejiltu/article/details/148478009?spm=1011.2415.3001.5331

https://blog.csdn.net/hugejiletuhugejiltu/article/details/145320105?spm=1011.2415.3001.5331 里面有详细的安装教程

7.2.2 1Panel部署核心服务

1、部署EMQ X

1Panel应用商店搜索EMQ X，一键安装部署，自动配置容器端口、持久化存储，部署完成后可直接使用MQTT服务，支持后台可视化监控设备连接状态、消息流量。

2、部署InfluxDB

应用商店安装InfluxDB时序数据库，配置账号密码、数据持久化目录，自动开放端口，用于存储设备时序数据，支持可视化管理数据库、数据表、数据备份。

3、部署MySQL

一键安装MySQL数据库，配置字符集、端口、初始账号密码，创建项目专属数据库，用于存储系统业务数据，支持可视化数据管理、权限配置、定时备份。

4、部署Python Scipy运行环境

通过1Panel终端安装Python环境，使用pip安装Scipy、numpy等科学计算库，搭建后端仿真计算环境，支持脚本后台运行、定时任务配置。

5、1Panel部署Vue前端项目

这里可以参考文章： https://blog.csdn.net/hugejiletuhugejiltu/article/details/148478009?spm=1011.2415.3001.5331 有详细的部署教程

  1. 前端项目执行npm run build打包，生成dist静态资源文件夹；

  2. 1Panel网站模块创建静态网站，上传dist文件；

  3. 自动配置Nginx托管、域名、端口、跨域规则；

  4. 开启HTTPS、缓存加速，完成前端项目线上部署。

7.3 整体部署架构

Ubuntu服务器 + 1Panel可视化运维 + Docker容器化部署

前端：Nginx托管Vue3静态项目

中间件：EMQ X容器化部署

数据库：MySQL、InfluxDB容器化部署

仿真计算：Python Scipy服务器本地环境运行

相关推荐
喵个咪1 小时前
吃透后台权限系统：从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js
Hommy881 小时前
【剪映小助手】视频处理接口
开源·github·音视频·视频剪辑自动化·剪映api
学且思1 小时前
Vue3 Patch 算法深度解析：从原理到源码实现
前端·vue.js
卤蛋fg61 小时前
vxe-table 导出 XLSX 文件：自动展开分组并导出图片
vue.js
mengqudoh2 小时前
elementui el-table 表头固定功能
javascript·vue.js·elementui
YiWait2 小时前
基于 Vue 3 的网络收音机,编译为桌面应用软件
前端·javascript·vue.js
古法编程第一人2 小时前
使用Electric同步前后端数据
前端·vue.js
Fisschl2 小时前
在 Vue 中实现输入框@人功能
vue.js
英俊潇洒美少年3 小时前
Vue 生产环境打包：SourceMap、压缩、混淆、Gzip、多环境配置 企业级最佳实践
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02【AI】2026 年具身智能模型和世界模型总结03Codex 接入 DeepSeek API 完整配置文档04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05DeepSeek V4 + Claude Code thinking mode 400 错误修复方案06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南082026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot09CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）10Windows端Codex接入第三方模型（DeekSeek，BaiLian)