Vue3 大屏可视化平台项目启动

快速启动

开发模式

npm run dev

启动后访问 http://localhost:3000

使用脚本快速启动（Windows）：

# 使用批处理文件
start.bat

# 或使用 PowerShell
start.ps1

生产构建

npm run build

构建产物将输出到 dist 目录。

预览构建结果

npm run preview

可用脚本

启动配置

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