Node.js Highcharts-more.js不'；无法在vue cli项目中工作

这几周我正在从事一个vue cli项目，我正在尝试制作如下极坐标图：

由于此图表需要highchart more文件，因此我使用npm安装并导入highcharts和highchart more库。然而，在导入这两个文件后，我在chrome控制台中出现以下错误，无法加载highchart。 错误

highcharts-more.js?7b43:8 Uncaught TypeError: p is not a function
at eval (eval at <anonymous> (app.js:874), <anonymous>:8:212)
at eval (eval at <anonymous> (app.js:874), <anonymous>:11:205)
at eval (eval at <anonymous> (app.js:807), <anonymous>:39:67)
at Object.<anonymous> (app.js:807)
at __webpack_require__ (app.js:658)
at fn (app.js:86)
at Object.<anonymous> (app.js:1182)
at __webpack_require__ (app.js:658)
at app.js:707
at app.js:710

highcharts more.js？7b43:8未捕获类型错误：p不是函数
在评估时（评估时）

如何正确使用highchart more文件？谢谢

这是我的密码：

main.js文件

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

// import $ from 'jquery'
import VueHighcharts from 'vue-highcharts'
import HighchartsMore from 'highcharts/highcharts-more'
Vue.use(VueRouter)
Vue.use(VueResource)

Vue.use(VueHighcharts)
HighchartsMore(VueHighcharts)

const router = new VueRouter({
  routes: [
   {
      path: '/result',
      name: 'result',
      component: Result
    },
    { path: '/*', redirect: '/introduction' }                 // Redirect all path to /hello
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    currentSection: 1,
    currentCategory: 1
  }


   })

<template>
  <div>
    <highcharts :options="options"></highcharts>

    <div class="col-sm-9">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  var options = {

    chart: {
      polar: true
    },

    title: {
      text: 'Highcharts Polar Chart'
    },

    pane: {
      startAngle: 0,
      endAngle: 360
    },

    xAxis: {
      tickInterval: 45,
      min: 0,
      max: 360,
      labels: {
        formatter: function () {
          return this.value + '°'
        }
      }
    },

    yAxis: {
      min: 0
    },

    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 45
      },
      column: {
        pointPadding: 0,
        groupPadding: 0
      }
    },

    series: [{
      type: 'column',
      name: 'Column',
      data: [8, 7, 6, 5, 4, 3, 2, 1],
      pointPlacement: 'between'
    }, {
      type: 'line',
      name: 'Line',
      data: [1, 2, 3, 4, 5, 6, 7, 8]
    }, {
      type: 'area',
      name: 'Area',
      data: [1, 8, 2, 7, 3, 6, 4, 5]
    }]

  }

  export default {
    data () {
      return {
        options: options
      }
    }
  }
</script>

从“Vue”导入Vue
从“./App”导入应用程序
从“vue路由器”导入VueRouter
从“vue资源”导入VueResource
//从“jquery”导入$
从“vue highcharts”导入VueHighcharts
从“highcharts/highcharts more”导入highcharts更多
Vue.use（VueRouter）
Vue.use（VueResource）
Vue.use（VueHighcharts）
HighchartsMore（VueHighcharts）
常量路由器=新的VueRouter({
路线：[
{
路径：'/result'，
名称：“结果”，
组成部分：结果
},
{path:'/*'，重定向：'/introduction'}//将所有路径重定向到/hello
]
})
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
模板：“”，
组件：{App}，
数据：{
第1节：，
当前类别：1
}
})

Result.vue文件

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

// import $ from 'jquery'
import VueHighcharts from 'vue-highcharts'
import HighchartsMore from 'highcharts/highcharts-more'
Vue.use(VueRouter)
Vue.use(VueResource)

Vue.use(VueHighcharts)
HighchartsMore(VueHighcharts)

const router = new VueRouter({
  routes: [
   {
      path: '/result',
      name: 'result',
      component: Result
    },
    { path: '/*', redirect: '/introduction' }                 // Redirect all path to /hello
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    currentSection: 1,
    currentCategory: 1
  }


   })

<template>
  <div>
    <highcharts :options="options"></highcharts>

    <div class="col-sm-9">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  var options = {

    chart: {
      polar: true
    },

    title: {
      text: 'Highcharts Polar Chart'
    },

    pane: {
      startAngle: 0,
      endAngle: 360
    },

    xAxis: {
      tickInterval: 45,
      min: 0,
      max: 360,
      labels: {
        formatter: function () {
          return this.value + '°'
        }
      }
    },

    yAxis: {
      min: 0
    },

    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 45
      },
      column: {
        pointPadding: 0,
        groupPadding: 0
      }
    },

    series: [{
      type: 'column',
      name: 'Column',
      data: [8, 7, 6, 5, 4, 3, 2, 1],
      pointPlacement: 'between'
    }, {
      type: 'line',
      name: 'Line',
      data: [1, 2, 3, 4, 5, 6, 7, 8]
    }, {
      type: 'area',
      name: 'Area',
      data: [1, 8, 2, 7, 3, 6, 4, 5]
    }]

  }

  export default {
    data () {
      return {
        options: options
      }
    }
  }
</script>


变量选项={
图表：{
极地：是的
},
标题：{
文字：“海图极坐标图”
},
窗格：{
startAngle:0，
端角：360
},
xAxis：{
时间间隔：45，
分:0,，
最高：360，
标签：{
格式化程序：函数（）{
返回此值。值+“°”
}
}
},
亚克斯：{
最低：0
},
打印选项：{
系列：{
起点：0，
点间距：45
},
专栏：{
点填充：0，
分组填充：0
}
},
系列：[{
键入：“列”，
名称：'列'，
数据：[8,7,6,5,4,3,2,1]，
pointPlacement:'between'
}, {
键入：“行”，
名称：'行'，
数据：[1,2,3,4,5,6,7,8]
}, {
类型：'区域'，
名称：'区域'，
数据：[1,8,2,7,3,6,4,5]
}]
}
导出默认值{
数据（）{
返回{
选项：选项
}
}
}
终于找到了答案：

编辑main.js文件如下：

import Highcharts from 'highcharts'
import VueHighcharts from 'vue-highcharts'
import highchartsMore from 'highcharts/highcharts-more'

highchartsMore(Highcharts)
Vue.use(VueHighcharts, {Highcharts})

它将像一个符咒一样工作：）
或者，您可以
从“Highcharts”导入{Highcharts}
。谢谢=]@Bert Evanst非常感谢！！正是我需要的！