Vue3 大屏可视化平台项目启动
快速启动
开发模式
npm run dev
启动后访问 http://localhost:3000
使用脚本快速启动（Windows）：
# 使用批处理文件
start.bat# 或使用 PowerShell
start.ps1
生产构建
npm run build
构建产物将输出到 dist 目录。
预览构建结果
npm run preview
可用脚本
| 命令 | 说明 |
|---|---|
npm run dev |
启动开发服务器 |
npm run build |
生产环境构建 |
npm run preview |
预览构建结果 |
npm run lint |
代码检查 |
启动配置
Vite 开发服务器配置
配置文件： vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'export default defineConfig({base: './',plugins: [vue()],resolve: {alias: {'@': resolve(__dirname, 'src')}},server: {port: 3000, // 开发服务器端口host: '0.0.0.0', // 允许局域网访问open: true // 自动打开浏览器},build: {outDir: 'dist',assetsDir: 'assets',sourcemap: false,rollupOptions: {output: {// 代码分割配置，优化加载性能manualChunks: {'vue-vendor': ['vue'],'echarts-vendor': ['echarts'],'element-plus-vendor': ['element-plus']}}}}
})
修改端口
如需修改开发服务器端口，编辑 vite.config.js：
server: {port: 8080, // 修改为你需要的端口
}
启用局域网访问
默认配置已启用局域网访问（host: '0.0.0.0'），同一局域网内的其他设备可以通过 IP 地址访问。
查看本机 IP：
# Windows
ipconfig# Linux/Mac
ifconfig
然后在其他设备访问：http://你的IP:3000
启动后页面功能
1. 头部区域
- 大屏标题显示
- 顶部导航菜单
- 实时时间和天气信息
- 智能搜索框
2. 左侧面板
- 统计卡片展示
- 数据可视化图表
- 趋势分析图表
3. 中心区域
- 天地图展示
- 人员位置追踪
- 实时位置更新
4. 右侧面板
- 图表数据展示
- 统计信息汇总
- 专利信息展示
常见问题
Q: 地图无法显示？
A: 检查以下几点：
- 检查天地图 API Key 是否正确配置在
src/config/map.config.js - 确认 API Key 已激活且有效
- 检查浏览器控制台是否有报错信息
Q: 天气信息不显示？
A: 检查以下几点：
- 检查和风天气 API Key 和 baseUrl 是否正确
- 确认 API Key 权限（免费版有请求限制）
- 查看控制台日志，使用 logError 会自动记录错误
Q: 页面卡顿怎么办？
A: 尝试以下方法：
- 启用性能监控查看 FPS 和内存使用
- 增加更新间隔（减少更新频率）
- 检查是否有性能警告
Q: 构建后样式错误？
A: 检查 vite.config.js 中的 base 配置是否符合部署路径。
Q: 如何关闭日志？
在 src/config/dashboard.config.js 中修改：
logging: {enableConsoleLog: false, // 关闭控制台日志logLevel: 'error' // 只显示错误日志
}
部署说明
Nginx 部署
- 执行
npm run build生成dist目录 - 将
dist目录内容复制到 Nginx 的 html 目录 - 配置 Nginx：
server {listen 80;server_name your-domain.com;root /path/to/dist;index index.html;location / {try_files $uri $uri/ /index.html;}
}
Docker 部署
创建 Dockerfile：
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
构建并运行：
docker build -t vue3-dashboard .
docker run -d -p 80:80 vue3-dashboard