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'

推荐阅读更多精彩内容