最近在做項目的時候遇到一個奇怪的問題，項目在本地中跑的好好的，但是經(jīng)過npm run build打包，并且再開啟反向代理后，原本由echarts生成的地圖突然消失了，這里簡單分析了一下原因。

1.引入方式錯誤：

引入的時候在script外使用了import + 絕對路徑引入，打包后原本的json文件由于打包位置和名稱都變了，導(dǎo)致json沒有被找到所以沒有顯示。

解決方式是在創(chuàng)建地圖的時候動態(tài)引入json文件。

2.可能描繪地圖的時候，承載地圖的dom沒有準(zhǔn)備好，導(dǎo)致地圖消失。

這里使用this.$nextTick來避免這個問題，這個代碼的作用類似于jq的ready，當(dāng)頁面完全掛載后執(zhí)行。

3.可能是由于書寫順序的問題，即注冊地圖的時候，echarts還沒有注冊，在vue中這個問題沒有表現(xiàn)出來。但是打包成靜態(tài)頁面后就出現(xiàn)問題了。

這個問題我是怎么想到的呢，打包完畢后，console爆了以下的錯。

報錯 6933.2de28ac9.js:1 地圖初始化失敗: 
ReferenceError: Cannot access 'o' before initializationat a.initMap (6933.2de28ac9.js:1:22084)

點開后發(fā)現(xiàn)報錯的地方原本的代碼是 if (myChart3 != null && myChart3 != "" && myChart3 != undefined) ，但是打包后代碼成了if（null ！=o &&null！=‘’&null ！=undefined），原本的mychart3全都變成了null，而這個就是echarts的實例對象。

所以修改順序，注冊的時候把這個echarts注冊到全局變量，方便清空舊的實例，確保dom元素存在后在創(chuàng)建新的實例。

另外，之前由于大量使用var，導(dǎo)致變量提升，函數(shù)內(nèi)的數(shù)據(jù)最好使用let。

最后，地圖成功重新出現(xiàn)了。

了解更多vue知識點擊這里。