时间戳

首页 > 解决方案 > 将echarts版本从4.1.0版更新到4.2.0-rc.2版后出现Vuejs错误

vuejs2 - 将echarts版本从4.1.0版更新到4.2.0-rc.2版后出现Vuejs错误

问题描述

我使用 Vue-CLI 在 vuejs 中创建了一个项目。我已将 echarts 的版本从 4.1.0 版更新到 4.2.0-rc.2 版。更新后出现以下错误：

  1. 在终端它显示错误：

“在 'echarts/lib/echarts' 中找不到导出 'default'（导入为 'echarts'）

  1. 在访问条形图页面时，它在控制台中显示错误为：

TypeError：无法分配给对象“#”的只读属性“exports”

在更新 echarts 包之前，这是我的代码

vue.config.js 文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
  baseUrl: process.env.NODE_ENV == 'production' ? '/' :  '/',
  transpileDependencies: [
    /\bvue-echarts\b/,
    /\bresize-detector\b/
  ],
  configureWebpack: {
    plugins: [
      //jquery plugin
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

更新 echarts 版本后，我用这些行替换了一些代码行：

transpileDependencies: [
  /\/node_modules\/vue-echarts\//,
  /\/node_modules\/resize-detector\//
],

在更新这些行时，我已经解决了第一个错误。但在 echarts 页面中，控制台出现以下错误：

挂载钩子错误：“错误：组件 series.bar 不存在。先加载它。”

这是我的条形图文件：

    <template>
      <ECharts :options="bar" style="width:100%; height:300px"></ECharts>
    </template>

    <script>
      import ECharts from "vue-echarts/components/ECharts.vue";
      import "echarts/lib/chart/bar";
      import "echarts/lib/component/title";
      import { ChartConfig } from "Constants/chart-config";

      export default {
        components: {
          ECharts
        },
        data() {
          return {
            bar: {
             tooltip: {
             trigger: "axis"
            },
            color: [ChartConfig.color.danger],
            legend: {
             data: ["Series A"]
           },
           xAxis: {
             type: "category",
             boundaryGap: true,
             data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
           },
           yAxis: {
             type: "value",
             axisLabel: {
             formatter: "{value} K"
           }
        },
        series: [
          {
            name: "Series A",
            type: "bar",
            data: [11, 11, 15, 13, 12, 13, 10]
          }
        ]
      }
    };
  }
};
</script>

我应该如何消除这些错误。如需更多信息，请告诉我。谢谢！

标签： vuejs2echartsvue-cli-3

解决方案

我终于找到了解决方案，出现这个错误是因为我们不能混合 commonjs 和 ES 模块。为了解决这个问题，我更新了 babel.config.js 文件：

// babel.config.js

module.exports = {
  presets: [
    ["@vue/app", {
      modules: "commonjs"
    }]
  ]
};

通过添加上面的代码，你所有的 ES 模块代码都会被转译成 commonjs，然后传递给 webpack 进行编译。

推荐阅读