Vue Chartkick不显示 编译警告+Unknown adapter报错页面白屏如何解决

• Vue版本与vue-chartkick版本不匹配："export 'h' was not found in 'vue"警告是因为你安装的vue-chartkick版本适配的是Vue3，而项目实际用的是Vue2，h渲染函数是Vue3专属API，Vue2不导出该方法。
• Chart.js版本不兼容："export 'default' (imported as 'Chart') was not found in 'chart.js"警告是因为高版本Chart.js（3.x+）没有默认导出配置，同时版本不匹配会导致适配器加载失败，触发Unknown adapter报错进而导致页面白屏。

根据你项目使用的Vue版本选择对应操作即可：

场景1：项目使用Vue 2 #

1. 卸载现有错误版本依赖

npm uninstall vue-chartkick chart.js

2. 安装适配Vue2的对应版本

npm install vue-chartkick@0.6.1 chart.js@2.9.4

3. 修改main.js导入代码

import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(Chartkick.use(Chart))

场景2：项目使用Vue 3 #

1. 卸载现有错误版本依赖

npm uninstall vue-chartkick chart.js

2. 安装适配Vue3的对应版本

npm install vue-chartkick@1.1.0 chart.js@3.9.1

3. 修改main.js导入代码

import { createApp } from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js/auto'
import App from './App.vue'

const app = createApp(App)
app.use(Chartkick.use(Chart))
app.mount('#app')

操作完成后重启本地开发服务即可消除警告和报错，页面恢复正常加载。

内容的提问来源于stack exchange，提问作者hella