Vue 项目打包后，报：Cannot read property ‘echarts’ of undefined

1. 问题说明

在 Vue 项目中，使用 echarts 来为项目添加图表。在本地运行测试时，是正常无错误的。可是，当把项目打包上线时，页面一直是白屏，且浏览器控制台输出如下错误：

TypeError: Cannot read property 'echarts' of undefined

错误信息截图如下：

2. 问题分析

从错误信息推测，是某个地方使用 x.y 形式调用 echarts 时，x 为 undefined 导致的错误。

回到项目里，使用到 echarts 的地方大致有 2 处，分析一下：

1. 项目中是采用了在 vue 原型上挂载 echarts 的方式，代码如下：

// main.js
// 引入 echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

然后，在需要使用 echarts 的地方，直接使用 this.$echarts 就能访问到 echarts 对象（这的 this 指的是 vue 的实例）。
这里，经过控制台打印输出，确定可以正确访问到 echarts。

2. 在项目中引入了一个 js 文件来设置图表主题，该主题 js 文件的代码如下：

(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);
    }
}(this, function (exports, echarts) {
// 这省略了具体的图表样式设置
......
})

可以看出，这是一个立即执行函数。该匿名函数有两个参数，一个是 root，指定作用域；一个是 factory，是一个回调函数，用于实现具体的主题设置。

针对这个问题，我们主要关注 root 参数。在浏览器中，立即执行函数会走 else 分支逻辑，即执行代码 factory({}, root.echarts);。这的 root 参数后面被指定为 this，而 this 得取值又决定于上下文。考虑到该文件最后是在图表组件文件中使用的，它是在 script 脚本部分引入的。打包后，js 处于严格模式，函数中的 this 为 undefined。这也就导致了 root.echarts --> this.echarts --> undefined.echarts！至此，问题找到了！

3. 解决办法

通过上述分析之后，找到症结所在，解决这个问题也就不难了！只需要以下 2 步：

1. 在主题 js 文件顶部，引入 echarts；
2. 把主题 js 文件里的 root.echarts 改成 echarts。