项目启动

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: 检查以下几点：

1. 检查天地图 API Key 是否正确配置在 src/config/map.config.js
2. 确认 API Key 已激活且有效
3. 检查浏览器控制台是否有报错信息

Q: 天气信息不显示？

A: 检查以下几点：

1. 检查和风天气 API Key 和 baseUrl 是否正确
2. 确认 API Key 权限（免费版有请求限制）
3. 查看控制台日志，使用 logError 会自动记录错误

Q: 页面卡顿怎么办？

A: 尝试以下方法：

1. 启用性能监控查看 FPS 和内存使用
2. 增加更新间隔（减少更新频率）
3. 检查是否有性能警告

Q: 构建后样式错误？

A: 检查 vite.config.js 中的 base 配置是否符合部署路径。

Q: 如何关闭日志？

在 src/config/dashboard.config.js 中修改：

logging: {enableConsoleLog: false,  // 关闭控制台日志logLevel: 'error'         // 只显示错误日志
}

部署说明

Nginx 部署

1. 执行 npm run build 生成 dist 目录
2. 将 dist 目录内容复制到 Nginx 的 html 目录
3. 配置 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