企业官网建设流程全解析

ThingsBoard Vue3前端：企业级物联网平台部署实战

【免费下载链接】thingsboard-ui-vue3本项目为基于Vue3开发的 ThingsBoard 前台 ,AntDesginVue、VbenVueAdmin、AntV X6、规则链代码已全部开放、ThingsBoard3.x持续更新中项目地址: https://gitcode.com/oliver225/thingsboard-ui-vue3

项目概述

ThingsBoard Vue3前端是基于Vue3技术栈开发的物联网平台管理界面，专为企业级IoT应用设计。该项目采用Ant Design Vue组件库，集成规则链可视化引擎，提供完整的设备管理、数据监控和业务编排能力。适用于需要快速构建物联网可视化平台的开发团队。

环境准备清单

系统要求

1. 操作系统：Linux Kernel 5.4+ / Windows 10+ / macOS 12+
2. Node.js版本：18.0.0 - 20.17.0（不支持21.x及以上版本）
3. 包管理器：PNPM 8.6.0+
4. Git版本：2.30.0+

软件版本检查

# 检查Node.js版本 node --version # 检查PNPM版本 pnpm --version # 检查Git版本 git --version

快速启动步骤

1. 获取项目源码

git clone https://gitcode.com/oliver225/thingsboard-ui-vue3.git cd thingsboard-ui-vue3

2. 安装项目依赖

pnpm install

3. 配置后端连接

编辑项目根目录下的.env.development文件：

VITE_PROXY = [["/api","http://your-thingsboard-backend:8080/api",false]]

4. 启动开发服务

pnpm dev

5. 访问验证

打开浏览器访问 http://localhost:3100，应该看到登录界面：

配置要点解析

后端API配置

1. 确保后端服务地址正确
2. 检查API路径是否包含/api前缀
3. 验证网络连通性

环境变量设置

开发环境使用.env.development 生产环境使用.env.production

问题排查手册

1. 依赖安装失败

# 清理缓存重新安装 pnpm store prune rm -rf node_modules pnpm-lock.yaml pnpm install --force

2. 端口占用问题

# 检查端口占用 netstat -tulpn | grep 3100 # 修改端口号 # 在vite.config.ts中修改server.port配置

3. 规则链显示异常

# 检查AntV X6依赖 pnpm list @antv/x6 # 重新安装指定版本 pnpm add @antv/x6@2.18.1 --force

4. 接口请求403错误

检查Nginx配置中的Cookie转发设置，确保包含：

proxy_cookie_path / /; proxy_set_header Cookie $http_cookie;

进阶部署方案

生产环境构建

# 构建生产版本 pnpm build # 检查构建产物 ls -la dist/

Nginx配置示例

server { listen 80; server_name iot.yourdomain.com; location / { root /var/www/thingsboard-ui-vue3/dist; try_files $uri $uri/ /index.html; expires 1d; } location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

功能验证步骤

1. 登录功能测试

   • 输入默认账号sysadmin@thingsboard.org
   • 验证密码输入和登录流程

2. 规则链配置验证

   • 进入规则链管理界面
   • 验证节点拖拽功能

3. 仪表盘功能验证
   • 检查设备状态统计显示
   • 验证地图标记功能

4. 性能基准测试
   • 加载1000个设备数据
   • 验证列表渲染速度
   • 检查内存使用情况

部署后维护

1. 定期检查日志文件
2. 监控系统资源使用
3. 及时更新安全补丁

【免费下载链接】thingsboard-ui-vue3本项目为基于Vue3开发的 ThingsBoard 前台 ,AntDesginVue、VbenVueAdmin、AntV X6、规则链代码已全部开放、ThingsBoard3.x持续更新中项目地址: https://gitcode.com/oliver225/thingsboard-ui-vue3