前端配置文件的简化和统一

vue/.env.development

@@ -9,3 +9,17 @@ VUE_APP_BASE_API = '/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+# 后端接口地址
+VUE_APP_SERVER_API_URL = 'http://localhost:8080'
+
+# EMQX接口地址和账号（EMQX安装默认账号密码为admin public）
+VUE_APP_EMQX_API_URL = 'http://wumei.live:8081'
+VUE_APP_EMQX_API_USER_NAME = 'admin'
+VUE_APP_EMQX_API_PASSWORD = 'public'
+
+# EMQX消息服务器连接地址(ws://localhost:8083/mqtt)
+VUE_APP_EMQX_SERVER_URL = 'wss://iot.wumei.live/mqtt'
+
+# 百度地图AK（自己申请，商用需要获得百度授权）
+VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'

vue/.env.production

@@ -6,3 +6,13 @@ ENV = 'production'
 
 # 物美智能管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'
+
+# EMQX接口账号（后端地址和EMQX接口地址部署时，通过nginx配置代理）
+VUE_APP_EMQX_API_USER_NAME = 'admin'
+VUE_APP_EMQX_API_PASSWORD = 'public'
+
+# EMQX消息服务器连接地址
+VUE_APP_EMQX_SERVER_URL = 'wss://iot.wumei.live/mqtt'
+
+# 百度地图AK（自己申请，商用需要获得百度授权）
+VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'

vue/.env.staging

@@ -9,3 +9,13 @@ ENV = 'staging'
 # 物美智能系统/测试环境
 VUE_APP_BASE_API = '/stage-api'
 
+# EMQX接口账号（后端地址和EMQX接口地址部署时，通过nginx配置代理）
+VUE_APP_EMQX_API_USER_NAME = 'admin'
+VUE_APP_EMQX_API_PASSWORD = 'public'
+
+# EMQX消息服务器连接地址
+VUE_APP_EMQX_SERVER_URL = 'wss://iot.wumei.live/mqtt'
+
+# 百度地图AK（自己申请，商用需要获得百度授权）
+VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'
+

vue/public/index.html

@@ -8,9 +8,6 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-    <!--引入百度地图,https部署需要添加一下meta-->
-    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
-    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD"></script>
 	  <style>
     html,
     body,

vue/src/api/iot/emqx.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
-const username = 'admin';
+const username = process.env.VUE_APP_EMQX_API_USER_NAME;
-const password = 'public';
+const password = process.env.VUE_APP_EMQX_API_PASSWORD;
 
 // 集群下所有客户端列表
 export function listMqttClient(query) {  

vue/src/utils/map.js

@@ -0,0 +1,28 @@
+export function loadBMap() {
+    return new Promise(function(resolve, reject) {
+        if (typeof BMap !== 'undefined') {
+            resolve(BMap)
+            return true
+        }
+        window.onBMapCallback = function() {
+            resolve(BMap)
+        }
+        // 使用https协议需要添加一下meta标签
+        var protocolStr = document.location.protocol;  
+        if(protocolStr == "https:")  
+        {  
+            let meta = document.createElement('meta')
+            meta.httpEquiv = 'Content-Security-Policy'
+            meta.content ='upgrade-insecure-requests'
+            meta.onerror = reject
+            document.head.appendChild(meta)
+        }       
+        // 引入百度地图
+        let script = document.createElement('script')
+        script.type = 'text/javascript'
+        script.src =
+            'http://api.map.baidu.com/api?v=2.0&ak='+ process.env.VUE_APP_BAI_DU_AK +'&__ec_v__=20190126&callback=onBMapCallback'
+        script.onerror = reject
+        document.head.appendChild(script)
+    })
+}

vue/src/views/index.vue

@@ -360,7 +360,7 @@ import * as echarts from 'echarts';
 require('echarts/theme/macarons') // echarts theme
 import {
     loadBMap
-} from './iot/map.js'
+} from '@/utils/map.js'
 //安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js，将其引入
 //ECharts的百度地图扩展，可以在百度地图上展现点图，线图，热力图等可视化
 require('echarts/extension/bmap/bmap')
@@ -480,11 +480,15 @@ export default {
             listAllDeviceShort(this.queryParams).then(response => {
                 this.deviceList = response.rows;
                 this.deviceCount = response.total;
-                this.$nextTick(() => {
+                this.loadMap();
-                    loadBMap().then(() => {
+            })
-                        this.getmap();
+        },
-                    });
+        /**加载地图*/
-                })
+        loadMap() {
+            this.$nextTick(() => {
+                loadBMap().then(() => {
+                    this.getmap();
+                });
             })
         },
         /** 查询emqx统计*/

vue/src/views/iot/device/device-edit.vue

@@ -167,7 +167,7 @@ import deviceStatistic from './device-statistic'
 import deviceTimer from './device-timer'
 import {
     loadBMap
-} from '../map.js'
+} from '@/utils/map.js'
 import {
     getDevice,
     addDevice,

vue/src/views/iot/device/mqtt-client.vue

@@ -48,10 +48,9 @@ export default {
                 connectTimeout: 10000
             }
             // 配置Mqtt地址
-            let url = "wss://iot.wumei.live/mqtt"
             // let url = "ws://" + window.location.hostname + ":8083/mqtt";
-            console.log("mqtt地址：", url);
+            console.log("mqtt地址：", process.env.VUE_APP_EMQX_SERVER_URL);
-            this.client = mqtt.connect(url, options);
+            this.client = mqtt.connect(process.env.VUE_APP_EMQX_SERVER_URL, options);
             this.client.on("connect", (e) => {
                 console.log("客户端：" + randomClientId + "，成功连接服务器:", e);
                 // 订阅主题

vue/src/views/iot/map.js

@@ -1,18 +0,0 @@
-export function loadBMap() {
-    let baiduAK="nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD";
-    return new Promise(function(resolve, reject) {
-        if (typeof BMap !== 'undefined') {
-            resolve(BMap)
-            return true
-        }
-        window.onBMapCallback = function() {
-            resolve(BMap)
-        }
-        let script = document.createElement('script')
-        script.type = 'text/javascript'
-        script.src =
-            'http://api.map.baidu.com/api?v=2.0&ak='+ baiduAK +'&__ec_v__=20190126&callback=onBMapCallback'
-        script.onerror = reject
-        document.head.appendChild(script)
-    })
-}

vue/vue.config.js

@@ -33,14 +33,14 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: process.env.VUE_APP_SERVER_API_URL,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
       ['/api/v4']: {
-        target: `http://wumei.live:8081`,
+        target: process.env.VUE_APP_EMQX_API_URL,
         changeOrigin: true,
         // logLevel: 'debug',
       },