简介基于 Vue 构建的智慧水务系统完整项目资料包整合了前端交互界面、业务逻辑与详细开发文档适合计算机相关专业学生用于毕业设计、课程设计、项目初期演示也可供开发者作为智慧大屏类工程的起步模板。压缩包共含二百三十个文件大小约两兆其中既有四十五个 Vue 组件、三十一个 JS 逻辑文件也有七十八个 CSS 样式文件以及二十八张 PNG 和十六个 SVG 图标素材能够覆盖页面布局、组件封装、路由交互与视觉资源等多层需求。从内容预览看项目集成了类似 Element UI 的组件样式内置表格、日期选择、分页、消息框等常用功能便于快速定位和二次开发。目前已有一百三十八人学习浏览答辩评审分达九十五分代码经测试运行成功另附详细文档和完整目录结构可帮助理解智慧水务的业务流程与实现思路同时支持在此基础上扩展功能。1. Vue智慧水务系统能给你什么——不是一个普通的管理后台水务行业的痛点在于数据太散泵站的压力、管网的流量、水厂的浊度、视频监控的画面分散在不同设备和系统里。基于Vue做的智慧水务系统就是把这些数据收拢到一个可视化界面里让调度中心的人能一眼看出哪个片区水压异常、哪台设备离线、哪个泵站该轮换了。它既是一个典型的前后端分离项目也是一个能写进简历的完整案例。它适合三类人需要毕业设计拿高分的学生、想转行做前端或全栈的开发者、以及水务相关行业想了解技术落地路径的工程师。标题里强调的全部资料高分项目详细文档意味着考察点不只是界面而是你有没有把设备接入、数据推送、路由权限、打包部署这套链路想明白。2. Vue智慧水务系统技术选型与前后端数据流2.1 为什么是Vue生态、学习成本和项目匹配度智慧水务这类项目最常见的形态是一个数据大屏加上若干管理页面页面间的跳转不多但单个页面里的实时数据变化很频繁。Vue在这类场景下的优势不是性能指标而是生态完整。ECharts有现成的Vue封装腾讯地图有官方vue组件若依这类开源后台脚手架可以直接套用社区里能找到大量水务、电力、交通行业的可视化模板。对比AngularVue的模板语法更贴近HTML新成员接手成本低对比ReactVuex和Pinia的响应式状态管理对设备数据定时刷新这种需求写起来更直接。另一个实际原因是后端团队的习惯。很多智慧水务系统的后端是基于SpringBoot或若依框架做的若依本身就是Vue技术栈。前后端共用一套中文文档和脚手架联调成本明显低于React项目。如果你是在校学生Vue生态里的教程密集度也远高于其他框架遇到问题更容易搜到答案。2.2 数据链路设计从传感器到Vue组件智慧水务系统的核心不是界面而是数据链路。我一般会把它拆成四层感知层管网压力计、流量计、水泵电表、水质传感器通过Modbus RTU或MQTT协议上报数据。接入层IoT网关或采集服务把不同协议的数据统一成JSON写入消息队列。服务层后端从消息队列消费数据存入时序数据库或MySQL同时通过WebSocket推送给前端。展示层Vue组件通过WebSocket接收到数据后更新ECharts图表、告警列表、设备状态卡片。这类项目的实时性要求通常是秒级。前端用轮询去拉接口也可以但设备数量到几百台之后轮询的请求量和数据库压力会明显上升。WebSocket是瀑布流推送服务器有数据才发Vue端只需要维护一个连接代码更省。采集服务与后端之间的数据格式我建议统一用结构化JSON{ deviceCode: PS-2024-001, type: pressure, value: 0.42, unit: MPa, timestamp: 2024-05-21T10:30:0008:00, status: normal }后端收到这条数据后先校验设备编码存在且在线再写入数据库最后推送到Redis频道由WebSocket服务转发给订阅了PS-2024-001的前端页面。这个设计的好处是Vue端不需要关心设备协议只消费统一格式的数据。2.3 状态管理Pinia更适合实时水务数据Vue项目里Pinia和Vuex的争论一直存在。Vuex适合大型复杂应用模块多、需要插件扩展。但智慧水务系统的实时数据特点是高频更新、作用域分散。流量数据只给大屏组用阀门状态只给操作员用如果全部放进Vuex的单一store每次更新都会触发大量组件重新计算依赖浪费性能。Pinia的API更轻而且天然适配Vue3的组合式API。我一般会把实时数据放进对应的业务store里把用户信息、权限、全局配置放进根store。维度VuexPinia数据变更方式Mutation必须在Action中提交直接修改state支持$patch模块间引用需要命名空间嵌套Composable风格store间可直接互相调用TypeScript支持配置繁琐原生支持适合场景大型复杂应用中后台系统、实时数据看板2.4 环境搭建Vue安装及环境配置的最小命令集拿到一个智慧水务项目资料包第一件事不是读代码而是把环境跑通。常见问题是Node版本不对、依赖装不上、运行端口被占用。建议按如下顺序执行# 1. 检查Node版本Vue3项目要求Node 16以上 node -v # 2. 使用nvm切换Node版本如果本机有多个版本 nvm install 18.20.2 nvm use 18.20.2 # 3. 进入项目目录安装依赖 npm install # 4. 启动开发服务器默认端口8080 npm run serve安装依赖遇到ERR! code ERESOLVE时通常是依赖树冲突可以用npm install --legacy-peer-deps绕过但只适合本地开发不要写进团队依赖脚本。项目跑起来之后打开浏览器访问http://localhost:8080如果页面空白先打开F12看Console报错90%是接口跨域或路由模式问题。3. Vue智慧水务系统核心模块的实现细节3.1 实时监控大屏WebSocket推送与ECharts刷新大屏是智慧水务系统的门面但它的技术含量不在于样式而在于数据更新时图表不能抖动、不能丢帧。常见的错误写法是把ECharts的setOption放在WebSocket的onmessage里直接调用数据频率高时图表会闪烁。正确的做法是加一个节流队列把1秒内的数据合并成一批再交给图表。// 伪代码示例Vue3 setup语法 import * as echarts from echarts import { ref, onMounted, onBeforeUnmount } from vue const chart ref(null) let ws null let pendingData [] let renderTimer null function connectWebSocket() { ws new WebSocket(ws://${location.host}/ws/monitor) ws.onmessage (event) { const data JSON.parse(event.data) pendingData.push(data) // 200ms合并一次渲染避免阻塞主线程 if (!renderTimer) { renderTimer setInterval(() { if (pendingData.length 0) return const merged pendingData.slice() pendingData [] updateChart(merged) }, 200) } } } function updateChart(dataList) { const pressureData dataList.filter(item item.type pressure).map(item item.value) chart.value.setOption({ series: [{ type: line, data: pressureData }] }) } onMounted(() { chart.value echarts.init(document.getElementById(pressureChart)) connectWebSocket() }) onBeforeUnmount(() { ws?.close() clearInterval(renderTimer) })这段代码的核心逻辑是WebSocket收到数据后只推入数组渲染逻辑由200ms定时器触发。这样做的原因是浏览器主线程同时承担渲染和网络回调如果每条数据都立刻触发setOption图表会频繁重绘页面卡顿。clearInterval放在onBeforeUnmount里防止用户切换路由后定时器还在跑。3.2 设备管理页Vue路由参数与详情联动设备列表是水务系统的常规页面。点击某台水泵跳转到详情页URL里带着设备编码。这个场景用到Vue路由参数重点在于参数应该如何传、刷新页面后参数是否还在。// 列表页跳转 this.$router.push({ path: /device/detail, query: { deviceCode: row.deviceCode, type: row.type } }) // 详情页读取参数 const { deviceCode, type } this.$route.queryquery方式传参的好处是刷新后参数不会丢失缺点是URL里会暴露设备编码而且参数过长会显得杂乱。另一种方式是params配合命名路由适合不需要分享链接的页面。设备详情页通常会根据deviceCode去请求设备档案、最近24小时运行曲线、告警记录三个接口这三个请求没有依赖关系可以用Promise.all同时发出而不是串行等待。3.3 地图图层在Vue里接腾讯地图管网分布图是水务系统的另一个高频模块。常见实现是Leaflet配合OpenStreetMap或者腾讯地图、高德地图。考虑到国内访问速度和坐标系我一般用腾讯地图的Vue组件封装。核心操作是地图初始化和标记点的动态更新。template div idpipeMap stylewidth: 100%; height: 600px/div /template script setup import { onMounted } from vue onMounted(() { const map new T.Map(pipeMap) map.centerAndZoom(new T.LngLat(120.15, 30.28), 12) // 请求管网设备列表并打点 fetch(/api/pipeline/devices) .then(res res.json()) .then(deviceList { deviceList.forEach(device { const marker new T.Marker(new T.LngLat(device.lng, device.lat)) // 绑定点击弹窗 const infoWindow new T.InfoWindow( 泵站${device.name}br压力${device.pressure}MPa, { offset: { x: 0, y: -40 } } ) marker.addEventListener(click, () map.openInfoWindow(infoWindow)) map.addOverlay(marker) }) }) }) /script设备数量过千之后逐个添加Marker会导致地图卡顿。常见的优化方式是使用T.MarkerClusterer聚合标记或者只加载当前视野范围内的设备。你要在答辩时表现出已经意识到这个问题不需要真的写聚合代码。4. Vue智慧水务系统的打包部署与常见问题排查4.1 Vue打包后布局异常根路径和静态资源路径开发环境一切正常打包发布后页面空白或样式错乱这是Vue项目里出现频率最高的问题之一。90%的原因是publicPath配置不对。默认情况下vue.config.js里的publicPath是/这意味着打包后的静态资源路径从域名根目录开始找。如果部署在水务系统的子路径下比如http://10.1.2.3/wisdom-water/资源就会去请求http://10.1.2.3/js/app.js找不到页面自然空白。// vue.config.js module.exports { publicPath: process.env.NODE_ENV production ? /wisdom-water/ : /, devServer: { port: 8080, proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } } }另外要注意的是Vue Router要用history模式时Nginx必须配置try_files回退否则刷新页面会出现404。如果没有配置权限安全的选择是用hash模式部署时完全不需要服务端配合。4.2 Nginx部署与反向代理配置Nginx是智慧水务项目最常见的部署方式。Vue打包产物是静态文件Nginx负责托管后端接口通过/api前缀代理到Java服务或Node服务。这里给一个能直接使用的配置server { listen 80; server_name water.example.com; # 托管Vue打包产物 root /opt/wisdom-water/dist; index index.html; # 历史路由模式回退到index.html location / { try_files $uri $uri/ /index.html; } # 后端API代理 location /api/ { proxy_pass http://127.0.0.1:9090; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # WebSocket代理智慧水务实时监控依赖这个 location /ws/ { proxy_pass http://127.0.0.1:9090; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_read_timeout 600s; } }WebSocket的代理配置是容易被忽略的点。如果没有设置Upgrade和Connection头浏览器能建立连接但几秒钟后就会断开前端表现为图表偶尔更新、偶尔不更新。proxy_read_timeout设置为600秒也是必要的水务大屏的连接会长时间挂起默认60秒超时会频繁断连。4.3 npm安装依赖时的版本冲突很多人在第一步就卡住。智慧水务项目如果是老项目可能存在Vue 2和Vue 3的依赖混装。最常见的报错是esbuild0.21.5或sass-loader与Node版本不兼容。错误现象常见原因处理方式ERR! ERESOLVE unable to resolve dependency tree依赖版本互不兼容先删除package-lock.json和node_modules重新安装esbuild: command failedNode版本过高或过低使用.nvmrc文件锁定Node版本Syntax Error: Error: Cannot find module node-sass项目用node-sass但当前Node不兼容换成sassDart Sass我在本地处理这类问题时一般是先看项目里锁定的框架版本再选择Node版本。Vue 2.x配合ElementUI的项目建议Node 1416Vue 3.x配合Vite或Vue CLI建议Node 1620。4.4 多表格导出一个Excel水务系统的报表模块经常会遇到一个页面有三个表格压力数据、流量数据、告警记录用户想一次性导出到同一个Excel文件的不同Sheet里。这个需求用xlsx库可以解决import * as XLSX from xlsx function exportMultipleSheets(dataList) { // dataList是[{sheetName: 压力, rows: [...]}, {sheetName: 流量, rows: [...]}] const workbook XLSX.utils.book_new() dataList.forEach((item, index) { const worksheet XLSX.utils.json_to_sheet(item.rows) XLSX.utils.book_append_sheet(workbook, worksheet, item.sheetName) // 第一张表设为激活状态打开Excel时默认展示 if (index 0) { workbook.Workbook { Sheets: [{ SheetName: item.sheetName }], WBView: [{ ActiveTab: 0 }] } } }) const timestamp new Date().toISOString().replace(/[:.]/g, -) XLSX.writeFile(workbook, water-report-${timestamp}.xlsx) }时间戳用于生成文件名防止同名文件覆盖或浏览器缓存。第一个Sheet设为激活状态的原因很简单Excel打开时会记住上次停留在哪个Sheet如果不设置用户每次打开文件都要手动切回第一个Sheet。5. 让Vue智慧水务系统经得起答辩和面试追问5.1 详细文档怎么组织才显得像专业项目资料包里有详细文档但很多人写文档就是把接口文档和截图拼一起。我更建议按四个目录组织01-需求说明说清这个水务系统服务谁、解决什么痛点、有哪些角色。02-架构设计画数据链路图说明前端、后端、数据库、设备接入四者的关系。03-接口文档每个接口的请求参数、响应示例、错误码。04-部署手册从Nginx配置到MySQL建库脚本。答辩时老师常问的不是你做了什么而是为什么用这个方案。比如为什么用WebSocket而不是轮询为什么设备数据要拆到独立store为什么大屏图表要节流你只要在部署手册里写一段关键设计决策说明把每一个选型的理由都讲清楚这就是高分项目和技术博客之间的分界线。5.2 一个值得加的进阶点模拟设备的数据采集器对于一个毕设项目不需要真实的泵站设备但可以加一个模拟采集器脚本让系统看起来是活的。用Node.js写一个定时器每秒钟生成一组波动数据发送MQTT或直接POST到后端接口。这个脚本的体积不大但它能让你演示时的大屏是动态的而不是靠手动刷数据库。// mock-device.js 模拟压力计 const express require(express) const app express() app.use(express.json()) let pressure 0.4 setInterval(() { // 模拟正常范围内的压力波动 pressure Math.max(0.2, Math.min(0.6, pressure (Math.random() - 0.5) * 0.02)) axios.post(http://localhost:9090/api/pipe-data, { deviceCode: MOCK-001, type: pressure, value: Number(pressure.toFixed(3)), timestamp: new Date().toISOString() }) }, 1000) app.listen(9091, () console.log(mock device started))演示时同时跑起Vue前端、后端、数据库和这个模拟器大屏数据就会自己跳动。面试聊这个项目时你甚至可以把这段代码当亮点讲证明你理解数据的来源而不仅仅是图的静态数据。本文还有配套的精品资源点击获取 Vue智慧水务系统开发实践：从实时监控大屏到项目部署
简介基于 Vue 构建的智慧水务系统完整项目资料包整合了前端交互界面、业务逻辑与详细开发文档适合计算机相关专业学生用于毕业设计、课程设计、项目初期演示也可供开发者作为智慧大屏类工程的起步模板。压缩包共含二百三十个文件大小约两兆其中既有四十五个 Vue 组件、三十一个 JS 逻辑文件也有七十八个 CSS 样式文件以及二十八张 PNG 和十六个 SVG 图标素材能够覆盖页面布局、组件封装、路由交互与视觉资源等多层需求。从内容预览看项目集成了类似 Element UI 的组件样式内置表格、日期选择、分页、消息框等常用功能便于快速定位和二次开发。目前已有一百三十八人学习浏览答辩评审分达九十五分代码经测试运行成功另附详细文档和完整目录结构可帮助理解智慧水务的业务流程与实现思路同时支持在此基础上扩展功能。1. Vue智慧水务系统能给你什么——不是一个普通的管理后台水务行业的痛点在于数据太散泵站的压力、管网的流量、水厂的浊度、视频监控的画面分散在不同设备和系统里。基于Vue做的智慧水务系统就是把这些数据收拢到一个可视化界面里让调度中心的人能一眼看出哪个片区水压异常、哪台设备离线、哪个泵站该轮换了。它既是一个典型的前后端分离项目也是一个能写进简历的完整案例。它适合三类人需要毕业设计拿高分的学生、想转行做前端或全栈的开发者、以及水务相关行业想了解技术落地路径的工程师。标题里强调的全部资料高分项目详细文档意味着考察点不只是界面而是你有没有把设备接入、数据推送、路由权限、打包部署这套链路想明白。2. Vue智慧水务系统技术选型与前后端数据流2.1 为什么是Vue生态、学习成本和项目匹配度智慧水务这类项目最常见的形态是一个数据大屏加上若干管理页面页面间的跳转不多但单个页面里的实时数据变化很频繁。Vue在这类场景下的优势不是性能指标而是生态完整。ECharts有现成的Vue封装腾讯地图有官方vue组件若依这类开源后台脚手架可以直接套用社区里能找到大量水务、电力、交通行业的可视化模板。对比AngularVue的模板语法更贴近HTML新成员接手成本低对比ReactVuex和Pinia的响应式状态管理对设备数据定时刷新这种需求写起来更直接。另一个实际原因是后端团队的习惯。很多智慧水务系统的后端是基于SpringBoot或若依框架做的若依本身就是Vue技术栈。前后端共用一套中文文档和脚手架联调成本明显低于React项目。如果你是在校学生Vue生态里的教程密集度也远高于其他框架遇到问题更容易搜到答案。2.2 数据链路设计从传感器到Vue组件智慧水务系统的核心不是界面而是数据链路。我一般会把它拆成四层感知层管网压力计、流量计、水泵电表、水质传感器通过Modbus RTU或MQTT协议上报数据。接入层IoT网关或采集服务把不同协议的数据统一成JSON写入消息队列。服务层后端从消息队列消费数据存入时序数据库或MySQL同时通过WebSocket推送给前端。展示层Vue组件通过WebSocket接收到数据后更新ECharts图表、告警列表、设备状态卡片。这类项目的实时性要求通常是秒级。前端用轮询去拉接口也可以但设备数量到几百台之后轮询的请求量和数据库压力会明显上升。WebSocket是瀑布流推送服务器有数据才发Vue端只需要维护一个连接代码更省。采集服务与后端之间的数据格式我建议统一用结构化JSON{ deviceCode: PS-2024-001, type: pressure, value: 0.42, unit: MPa, timestamp: 2024-05-21T10:30:0008:00, status: normal }后端收到这条数据后先校验设备编码存在且在线再写入数据库最后推送到Redis频道由WebSocket服务转发给订阅了PS-2024-001的前端页面。这个设计的好处是Vue端不需要关心设备协议只消费统一格式的数据。2.3 状态管理Pinia更适合实时水务数据Vue项目里Pinia和Vuex的争论一直存在。Vuex适合大型复杂应用模块多、需要插件扩展。但智慧水务系统的实时数据特点是高频更新、作用域分散。流量数据只给大屏组用阀门状态只给操作员用如果全部放进Vuex的单一store每次更新都会触发大量组件重新计算依赖浪费性能。Pinia的API更轻而且天然适配Vue3的组合式API。我一般会把实时数据放进对应的业务store里把用户信息、权限、全局配置放进根store。维度VuexPinia数据变更方式Mutation必须在Action中提交直接修改state支持$patch模块间引用需要命名空间嵌套Composable风格store间可直接互相调用TypeScript支持配置繁琐原生支持适合场景大型复杂应用中后台系统、实时数据看板2.4 环境搭建Vue安装及环境配置的最小命令集拿到一个智慧水务项目资料包第一件事不是读代码而是把环境跑通。常见问题是Node版本不对、依赖装不上、运行端口被占用。建议按如下顺序执行# 1. 检查Node版本Vue3项目要求Node 16以上 node -v # 2. 使用nvm切换Node版本如果本机有多个版本 nvm install 18.20.2 nvm use 18.20.2 # 3. 进入项目目录安装依赖 npm install # 4. 启动开发服务器默认端口8080 npm run serve安装依赖遇到ERR! code ERESOLVE时通常是依赖树冲突可以用npm install --legacy-peer-deps绕过但只适合本地开发不要写进团队依赖脚本。项目跑起来之后打开浏览器访问http://localhost:8080如果页面空白先打开F12看Console报错90%是接口跨域或路由模式问题。3. Vue智慧水务系统核心模块的实现细节3.1 实时监控大屏WebSocket推送与ECharts刷新大屏是智慧水务系统的门面但它的技术含量不在于样式而在于数据更新时图表不能抖动、不能丢帧。常见的错误写法是把ECharts的setOption放在WebSocket的onmessage里直接调用数据频率高时图表会闪烁。正确的做法是加一个节流队列把1秒内的数据合并成一批再交给图表。// 伪代码示例Vue3 setup语法 import * as echarts from echarts import { ref, onMounted, onBeforeUnmount } from vue const chart ref(null) let ws null let pendingData [] let renderTimer null function connectWebSocket() { ws new WebSocket(ws://${location.host}/ws/monitor) ws.onmessage (event) { const data JSON.parse(event.data) pendingData.push(data) // 200ms合并一次渲染避免阻塞主线程 if (!renderTimer) { renderTimer setInterval(() { if (pendingData.length 0) return const merged pendingData.slice() pendingData [] updateChart(merged) }, 200) } } } function updateChart(dataList) { const pressureData dataList.filter(item item.type pressure).map(item item.value) chart.value.setOption({ series: [{ type: line, data: pressureData }] }) } onMounted(() { chart.value echarts.init(document.getElementById(pressureChart)) connectWebSocket() }) onBeforeUnmount(() { ws?.close() clearInterval(renderTimer) })这段代码的核心逻辑是WebSocket收到数据后只推入数组渲染逻辑由200ms定时器触发。这样做的原因是浏览器主线程同时承担渲染和网络回调如果每条数据都立刻触发setOption图表会频繁重绘页面卡顿。clearInterval放在onBeforeUnmount里防止用户切换路由后定时器还在跑。3.2 设备管理页Vue路由参数与详情联动设备列表是水务系统的常规页面。点击某台水泵跳转到详情页URL里带着设备编码。这个场景用到Vue路由参数重点在于参数应该如何传、刷新页面后参数是否还在。// 列表页跳转 this.$router.push({ path: /device/detail, query: { deviceCode: row.deviceCode, type: row.type } }) // 详情页读取参数 const { deviceCode, type } this.$route.queryquery方式传参的好处是刷新后参数不会丢失缺点是URL里会暴露设备编码而且参数过长会显得杂乱。另一种方式是params配合命名路由适合不需要分享链接的页面。设备详情页通常会根据deviceCode去请求设备档案、最近24小时运行曲线、告警记录三个接口这三个请求没有依赖关系可以用Promise.all同时发出而不是串行等待。3.3 地图图层在Vue里接腾讯地图管网分布图是水务系统的另一个高频模块。常见实现是Leaflet配合OpenStreetMap或者腾讯地图、高德地图。考虑到国内访问速度和坐标系我一般用腾讯地图的Vue组件封装。核心操作是地图初始化和标记点的动态更新。template div idpipeMap stylewidth: 100%; height: 600px/div /template script setup import { onMounted } from vue onMounted(() { const map new T.Map(pipeMap) map.centerAndZoom(new T.LngLat(120.15, 30.28), 12) // 请求管网设备列表并打点 fetch(/api/pipeline/devices) .then(res res.json()) .then(deviceList { deviceList.forEach(device { const marker new T.Marker(new T.LngLat(device.lng, device.lat)) // 绑定点击弹窗 const infoWindow new T.InfoWindow( 泵站${device.name}br压力${device.pressure}MPa, { offset: { x: 0, y: -40 } } ) marker.addEventListener(click, () map.openInfoWindow(infoWindow)) map.addOverlay(marker) }) }) }) /script设备数量过千之后逐个添加Marker会导致地图卡顿。常见的优化方式是使用T.MarkerClusterer聚合标记或者只加载当前视野范围内的设备。你要在答辩时表现出已经意识到这个问题不需要真的写聚合代码。4. Vue智慧水务系统的打包部署与常见问题排查4.1 Vue打包后布局异常根路径和静态资源路径开发环境一切正常打包发布后页面空白或样式错乱这是Vue项目里出现频率最高的问题之一。90%的原因是publicPath配置不对。默认情况下vue.config.js里的publicPath是/这意味着打包后的静态资源路径从域名根目录开始找。如果部署在水务系统的子路径下比如http://10.1.2.3/wisdom-water/资源就会去请求http://10.1.2.3/js/app.js找不到页面自然空白。// vue.config.js module.exports { publicPath: process.env.NODE_ENV production ? /wisdom-water/ : /, devServer: { port: 8080, proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } } }另外要注意的是Vue Router要用history模式时Nginx必须配置try_files回退否则刷新页面会出现404。如果没有配置权限安全的选择是用hash模式部署时完全不需要服务端配合。4.2 Nginx部署与反向代理配置Nginx是智慧水务项目最常见的部署方式。Vue打包产物是静态文件Nginx负责托管后端接口通过/api前缀代理到Java服务或Node服务。这里给一个能直接使用的配置server { listen 80; server_name water.example.com; # 托管Vue打包产物 root /opt/wisdom-water/dist; index index.html; # 历史路由模式回退到index.html location / { try_files $uri $uri/ /index.html; } # 后端API代理 location /api/ { proxy_pass http://127.0.0.1:9090; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # WebSocket代理智慧水务实时监控依赖这个 location /ws/ { proxy_pass http://127.0.0.1:9090; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_read_timeout 600s; } }WebSocket的代理配置是容易被忽略的点。如果没有设置Upgrade和Connection头浏览器能建立连接但几秒钟后就会断开前端表现为图表偶尔更新、偶尔不更新。proxy_read_timeout设置为600秒也是必要的水务大屏的连接会长时间挂起默认60秒超时会频繁断连。4.3 npm安装依赖时的版本冲突很多人在第一步就卡住。智慧水务项目如果是老项目可能存在Vue 2和Vue 3的依赖混装。最常见的报错是esbuild0.21.5或sass-loader与Node版本不兼容。错误现象常见原因处理方式ERR! ERESOLVE unable to resolve dependency tree依赖版本互不兼容先删除package-lock.json和node_modules重新安装esbuild: command failedNode版本过高或过低使用.nvmrc文件锁定Node版本Syntax Error: Error: Cannot find module node-sass项目用node-sass但当前Node不兼容换成sassDart Sass我在本地处理这类问题时一般是先看项目里锁定的框架版本再选择Node版本。Vue 2.x配合ElementUI的项目建议Node 1416Vue 3.x配合Vite或Vue CLI建议Node 1620。4.4 多表格导出一个Excel水务系统的报表模块经常会遇到一个页面有三个表格压力数据、流量数据、告警记录用户想一次性导出到同一个Excel文件的不同Sheet里。这个需求用xlsx库可以解决import * as XLSX from xlsx function exportMultipleSheets(dataList) { // dataList是[{sheetName: 压力, rows: [...]}, {sheetName: 流量, rows: [...]}] const workbook XLSX.utils.book_new() dataList.forEach((item, index) { const worksheet XLSX.utils.json_to_sheet(item.rows) XLSX.utils.book_append_sheet(workbook, worksheet, item.sheetName) // 第一张表设为激活状态打开Excel时默认展示 if (index 0) { workbook.Workbook { Sheets: [{ SheetName: item.sheetName }], WBView: [{ ActiveTab: 0 }] } } }) const timestamp new Date().toISOString().replace(/[:.]/g, -) XLSX.writeFile(workbook, water-report-${timestamp}.xlsx) }时间戳用于生成文件名防止同名文件覆盖或浏览器缓存。第一个Sheet设为激活状态的原因很简单Excel打开时会记住上次停留在哪个Sheet如果不设置用户每次打开文件都要手动切回第一个Sheet。5. 让Vue智慧水务系统经得起答辩和面试追问5.1 详细文档怎么组织才显得像专业项目资料包里有详细文档但很多人写文档就是把接口文档和截图拼一起。我更建议按四个目录组织01-需求说明说清这个水务系统服务谁、解决什么痛点、有哪些角色。02-架构设计画数据链路图说明前端、后端、数据库、设备接入四者的关系。03-接口文档每个接口的请求参数、响应示例、错误码。04-部署手册从Nginx配置到MySQL建库脚本。答辩时老师常问的不是你做了什么而是为什么用这个方案。比如为什么用WebSocket而不是轮询为什么设备数据要拆到独立store为什么大屏图表要节流你只要在部署手册里写一段关键设计决策说明把每一个选型的理由都讲清楚这就是高分项目和技术博客之间的分界线。5.2 一个值得加的进阶点模拟设备的数据采集器对于一个毕设项目不需要真实的泵站设备但可以加一个模拟采集器脚本让系统看起来是活的。用Node.js写一个定时器每秒钟生成一组波动数据发送MQTT或直接POST到后端接口。这个脚本的体积不大但它能让你演示时的大屏是动态的而不是靠手动刷数据库。// mock-device.js 模拟压力计 const express require(express) const app express() app.use(express.json()) let pressure 0.4 setInterval(() { // 模拟正常范围内的压力波动 pressure Math.max(0.2, Math.min(0.6, pressure (Math.random() - 0.5) * 0.02)) axios.post(http://localhost:9090/api/pipe-data, { deviceCode: MOCK-001, type: pressure, value: Number(pressure.toFixed(3)), timestamp: new Date().toISOString() }) }, 1000) app.listen(9091, () console.log(mock device started))演示时同时跑起Vue前端、后端、数据库和这个模拟器大屏数据就会自己跳动。面试聊这个项目时你甚至可以把这段代码当亮点讲证明你理解数据的来源而不仅仅是图的静态数据。本文还有配套的精品资源点击获取