Vue版本Echarts中國地圖三級鑽取及Vue踩坑筆記

我的原創地址：https://dongkelun.com/2019/02/18/vueEchartsMap/

前言

這段時間又搞起了前端，用Vue做一個項目，前段時間用html+css+js寫了一個Echarts中國地圖三級鑽取，現在用Vue再實現一遍，主要用來練手，熟悉一下Vue的使用並記錄一下期間遇到的一些坑及如何解決的。

1、演示地址

http://gh.dongkelun.com/vue-echarts-map/#/

2、代碼

代碼已上傳到GitHub：https://github.com/dongkelun/vue-echarts-map

3、運行及部署

3.1 本地運行

安裝依賴

npm install

運行

npm run dev

訪問：localhost:8080

3.2 部署

打包

npm run build

部署到tomcat參考：通過Vue CLI 快速創建Vue項目並部署到tomcat

4、Vue踩坑筆記

在公司做的項目是用的GitHub上的項目https://github.com/PanJiaChen/vue-admin-template搭建的框架進行開發，由於是別人已經搭好了，在這基礎上進行開發修改會少踩很多坑，但是不能老用別人的框架，想自己完整的從頭開始一個Vue項目，所以用Vue ClI創建項目，然後一點一點的搭建開發，所以就會遇到很多坑。

4.1 Vue CLI版本

新版本Vue CLI 3和舊版本 Vue CLI 2創建的項目，目錄結構不一樣，比如新版的沒有靜態文件夾static，並且也沒有build和config文件夾，而之前用的項目是用Vue ClI2創建的，所以就用Vue CLI2創建項目。

之所以會提版本問題，是因爲當用axios獲取本地json文件時，json文件必須在靜態文件夾static裏，而用3版本的即使自己新建一個static文件夾也不管用

4.2 圖片路徑問題

在本地運行，圖片引用沒有問題，打包後，引用的圖片路徑（包括json文件路徑）就不對了，解決方案：
在build/util.js裏找到ExtractTextPlugin.extract，然後添加publicPath:'../../'，添加完代碼如下

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath:'../../',
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

在打包部署就沒有問題了

參考:vue-cil和webpack中本地靜態圖片的路徑問題解決方案

4.3 在IE瀏覽器顯示空白（不兼容）

解決方案：引入babel-polyfill

安裝

npm install babel-polyfill --save-dev

引入
在main.js裏添加

import 'babel-polyfill'