将highchartsjs添加到Vue3应用程序时出错

Question

我使用的是Vue 3，并根据文档添加了highchartsjs。我得到这个错误：

✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵                              ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.

我试着按照建议将其从捆绑包中排除，但不起作用：

vite.config.js

export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})

Answer 1

通过optimizeDeps.exclude排除highcharts将清除错误，但这将无法实现在项目中使用highcharts的最终目标。您会注意到，在使用该配置之后，您的项目仍然无法导入highcharts。该错误表明您的项目缺少该依赖项。

解决方案是安装highcharts:

npm install -S highcharts

演示

Answer 2

这是有效的：

export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})