Vue3项目集成vue-chart.js后页面无法显示图表问题求助

核心错误点 #

• 依赖版本不兼容：你当前安装的vue-chartjs@3.x仅支持Vue 2，项目使用Vue 3，版本完全不匹配。同时安装的vue-chart-3未被实际使用，chart.js@2.9.4也和Vue 3生态适配存在问题。
• 组件循环引用：你标注为../src/Chart/RandomChart.vue的第一个代码文件，内部又导入了../Chart/RandomChart.vue，属于同名文件自引用，会触发组件渲染死循环，直接导致页面无法加载。该文件本质应该是你的主页面MainPage.vue，属于文件名标注/命名错误。
• 组件写法不兼容：LineChart.js的写法是Vue 2版本对应的API，不适配Vue 3环境。
• 路由配置缺失：你未提供路由配置代码，大概率没有将MainPage.vue配置到路由规则中，导致访问对应路径时没有加载目标组件。

修复步骤 #

1. 卸载不兼容依赖

npm uninstall vue-chartjs chart.js vue-chart-3

2. 安装适配Vue 3的对应依赖

npm install vue-chartjs@^4.1.2 chart.js@^3.9.1

3. 修正主页面文件名
   将你第一个代码文件重命名为src/pages/MainPage.vue，文件内容无需修改，避免和src/Chart/RandomChart.vue重名导致循环引用。
4. 改写LineChart.js适配新版本

import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale
)

export default {
  name: 'LineChart',
  components: { Line },
  props: {
    chartData: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  template: '<Line :chart-data="chartData" :options="options" />'
}

5. 补充路由配置
   在src/router/router.js中添加主页面路由规则，示例如下：

import { createRouter, createWebHistory } from 'vue-router'
import MainPage from '../pages/MainPage.vue'

const routes = [
  {
    path: '/',
    name: 'MainPage',
    component: MainPage
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

完成以上步骤后重新启动项目即可正常渲染图表。

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