Vue版本Echarts中国地图三级钻取及Vue踩坑笔记

2019-02-18

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住给大家分享一下。点击跳转到网站：https://www.captainai.net/dongkelun

欢迎关注我的公众号

前言

这段时间又搞起了前端，用Vue做一个项目，前段时间用html+css+js写了一个Echarts中国地图三级钻取，现在用Vue再实现一遍，主要用来练手，熟悉一下Vue的使用并记录一下期间遇到的一些坑及如何解决的。

1、演示地址

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

2、代码

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

3、运行及部署

3.1 本地运行

安装依赖

1	npm install

运行

1	npm run dev

访问：localhost:8080

3.2 部署

打包

1	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)
}