最近在做数据大屏，最开始是别的同事负责，她请假后我负责，整理遇到的问题，都是在dev 时正常，部署到线上时运行异常。
走了不少弯路，又升级版本，又换npm、cnpm、yarn各种尝试修改，按下葫芦浮起瓢，最终找到问题解决方案，记录下来帮助有缘人。实际找到问题原因，处理起来非常简单。
问题1：页面路由来回切换后发现图表不能正常渲染，本地运行npm run dev正常，发布到线上就不正常了。
解决方案：
创建图表前先移除对应id

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

问题2：使用百度地图，切换路由后页面还是旧页面，看浏览器地址已经变为新的路由地址了，手动刷新页面可正常显示。该问题也是在本地运行时正常，打包到线上时后台报错，路由切换异常。
排查：发现后台打印报错 TypeError: Cannot read properties of undefined (reading 'refs')
发现<BMap>中传入了ref,去掉后页面运行正常。代码如下

<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后打包到线上页面运行正常

<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"
        />