项目打包后echarts生成的json地图消失怎么办

最近在做项目的时候遇到一个奇怪的问题，项目在本地中跑的好好的，但是经过npm run build打包，并且再开启反向代理后，原本由echarts生成的地图突然消失了，这里简单分析了一下原因。

1.引入方式错误：

引入的时候在script外使用了import + 绝对路径引入，打包后原本的json文件由于打包位置和名称都变了，导致json没有被找到所以没有显示。

解决方式是在创建地图的时候动态引入json文件。

2.可能描绘地图的时候，承载地图的dom没有准备好，导致地图消失。

这里使用this.$nextTick来避免这个问题，这个代码的作用类似于jq的ready，当页面完全挂载后执行。

3.可能是由于书写顺序的问题，即注册地图的时候，echarts还没有注册，在vue中这个问题没有表现出来。但是打包成静态页面后就出现问题了。

这个问题我是怎么想到的呢，打包完毕后，console爆了以下的错。

报错 6933.2de28ac9.js:1 地图初始化失败: 
ReferenceError: Cannot access 'o' before initializationat a.initMap (6933.2de28ac9.js:1:22084)

点开后发现报错的地方原本的代码是 if (myChart3 != null && myChart3 != "" && myChart3 != undefined) ，但是打包后代码成了if（null ！=o &&null！=‘’&null ！=undefined），原本的mychart3全都变成了null，而这个就是echarts的实例对象。

所以修改顺序，注册的时候把这个echarts注册到全局变量，方便清空旧的实例，确保dom元素存在后在创建新的实例。

另外，之前由于大量使用var，导致变量提升，函数内的数据最好使用let。

最后，地图成功重新出现了。

了解更多vue知识点击这里。