最近在做數(shù)據(jù)大屏，最開始是別的同事負(fù)責(zé)，她請(qǐng)假后我負(fù)責(zé)，整理遇到的問(wèn)題，都是在dev 時(shí)正常，部署到線上時(shí)運(yùn)行異常。
走了不少?gòu)澛?，又升?jí)版本，又換npm、cnpm、yarn各種嘗試修改，按下葫蘆浮起瓢，最終找到問(wèn)題解決方案，記錄下來(lái)幫助有緣人。實(shí)際找到問(wèn)題原因，處理起來(lái)非常簡(jiǎn)單。
問(wèn)題1：頁(yè)面路由來(lái)回切換后發(fā)現(xiàn)圖表不能正常渲染，本地運(yùn)行npm run dev正常，發(fā)布到線上就不正常了。
解決方案：
創(chuàng)建圖表前先移除對(duì)應(yīng)id

document.getElementById('ageEcharts').removeAttribute('_echarts_instance_');
    let chart = ageEcharts.init(document.getElementById('ageEcharts'), 'purple-passion');

問(wèn)題2：使用百度地圖，切換路由后頁(yè)面還是舊頁(yè)面，看瀏覽器地址已經(jīng)變?yōu)樾碌穆酚傻刂妨?，手?dòng)刷新頁(yè)面可正常顯示。該問(wèn)題也是在本地運(yùn)行時(shí)正常，打包到線上時(shí)后臺(tái)報(bào)錯(cuò)，路由切換異常。
排查：發(fā)現(xiàn)后臺(tái)打印報(bào)錯(cuò) TypeError: Cannot read properties of undefined (reading 'refs')
發(fā)現(xiàn)<BMap>中傳入了ref,去掉后頁(yè)面運(yùn)行正常。代碼如下

<BMap
        :heading="360"
        :tilt="20"
        :zoom="17.6"
        :minZoom="3"
        :roam="true"
        :center="{ lat: 35.072849, lng: 118.335627 }"
        height="calc(100vh - 63px)"
                    ref="mapItem"
        :restrictCenter="false"
        mapStyleId="994a4d79082d3128d34c2152a0a3d8a8"
        :displayOptions="{
            indoor: false,
            poi: false,
            restrictCenter: false,
            skyColors: ['rgba(226, 237, 248, 0)', 'rgba(186, 211, 252, 0)']
        }"
        enableScrollWheelZoom
        :plugins="['Mapvgl', 'Mapv', 'mapv-three', 'TrackAnimation']"
        @pluginReady="handlePluginReady"
    />

去掉ref后打包到線上頁(yè)面運(yùn)行正常

<BMap
            :heading="360"
            :tilt="20"
            :zoom="17.6"
            :minZoom="3"
            :roam="true"
            :center="{ lat: 35.072849, lng: 118.335627 }"
            height="calc(100vh - 63px)"
            :restrictCenter="false"
            mapStyleId="994a4d79082d3128d34c2152a0a3d8a8"
            :displayOptions="{
                indoor: false,
                poi: false,
                restrictCenter: false,
                skyColors: ['rgba(226, 237, 248, 0)', 'rgba(186, 211, 252, 0)']
            }"
            enableScrollWheelZoom
            :plugins="['Mapvgl', 'Mapv', 'mapv-three', 'TrackAnimation']"
            @pluginReady="handlePluginReady"
        />