Vue 3-不支持动态要求的“高级图表”

Question

我试图包括这样的高级图表：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import HighchartsVue from "highcharts-vue";


const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(HighchartsVue);

app.mount('#app')

但我发现了错误：

 Dynamic require of "highcharts" is not supported

package.json

{
  "name": "mwc-web",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 5050"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.4",
    "bootstrap": "^5.1.3",
    "bootstrap-vue-3": "^0.1.9",
    "highcharts": "^10.0.0",
    "highcharts-vue": "^1.4.0",
    "moment": "^2.29.1",
    "pinia": "^2.0.11",
    "vue": "^3.2.31",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.2",
    "@vue/cli-plugin-babel": "^5.0.4",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "vite": "^2.8.4"
  }
}

vite.config.js

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  optimizeDeps: {
    exclude: ['highcharts'],
  }
})

babel.config.js

module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ]
}

Answer 1

我认为造成这一问题的原因是这个配置：

optimizeDeps: {
  exclude: ['highcharts'], // ❌ don't do this
}

解决方案是从highcharts中删除optimizeDeps.exclude。

另外，在使用Vite时，您不需要Babel配置。这可能是问题的另一个根源。

演示

Answer 2

下面是vue3 +highcharts-vue的一个工作示例：https://codesandbox.io/s/vue3-highcharts-example-k98kyz

确保更新到最新版本，并使用babel或任何其他传输程序来处理ESM包。