关于vue-cli打包后echart无法加载的问题

Question

1: 项目需要展示省地图监看实时数据 在网上找到相应的办法及地图文件后高高兴兴调通 本地测试环境完美 今天打包上线后发现 页面突然间无法加载成功经过排查发现是引入省地图文件的js报错造成打包后 页面报错无法找到 echarts

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['exports', 'echarts'], factory)
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // CommonJS
    factory(exports, require('echarts'))
  } else {
    // Browser globals
    factory({}, root.echarts)
  }
}

在编译器中也会提示define(['exports', 'echarts'], factory)中的define未定义 估计就是这个问题造成打包没有吧echarts暴露出去 但是奇怪的是本地测试环境同样报错页面确显示完好！

2：网上搜了很多也没有类似的问题 我自己有两个思考方向 第一个是考虑是不是 vue-cli 打包后不支持AMD 模式造成引入echart失败 不然为什么不打包就能正常没有问题了！ 第二个方向是解决define关键字 未定义的错误 ！ 但是目前两个都走到了死胡同 不知道大家有没有遇到过类似的问题 请大家帮忙看看 谢谢大家了！

Answer 1

调用地图有两种方式 第一种是 引用js版本地图文件就好比我问题中的那样还有一种是引用json数据版本的地图文件 这样就很好的避开了问题

Answer 2

// 给他头部他改改 下面是vue的导出 参考一下
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.echarts = factory());
}(this, function () {
    // 
})

Answer 3

直接在指定文件中引入插件 require（"...echarts.min.js"）;
或者在html文件中引入echart文件