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

1.引入方式錯(cuò)誤：

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

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

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

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

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

這個(gè)問(wèn)題我是怎么想到的呢，打包完畢后，console爆了以下的錯(cuò)。

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

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

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

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

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

了解更多vue知識(shí)點(diǎn)擊這里。