@vue/cli 4.5.13创建的vue项目接入chart.js报错该如何解决？

常见报错原因及解决方法 #

• 版本不兼容：@vue/cli 4.5.13默认创建的是Vue2项目，和最新版Chart.js v4+存在适配冲突，建议降级到Chart.js v3.9.1版本，执行命令 npm uninstall chart.js && npm install chart.js@3.9.1 即可，如需使用封装组件可搭配vue-chartjs@4.1.2版本，不需要额外全局注册。
• 调用时机错误：不能在created生命周期内初始化图表，必须等dom渲染完成后在mounted生命周期内调用，且需要先通过ref获取canvas节点再创建实例，基础示例代码如下：

<template>
  <div class="chart-container">
    <canvas ref="chartRef" width="400" height="400"></canvas>
  </div>
</template>
<script>
import { Chart, registerables } from 'chart.js'
// 注册所有Chart.js模块，避免功能缺失报错
Chart.register(...registerables)

export default {
  name: 'DemoChart',
  mounted () {
    // dom渲染完成后初始化图表
    new Chart(this.$refs.chartRef, {
      type: 'bar',
      data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
          label: '销售额',
          data: [1200, 1900, 300, 500, 200, 300],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    })
  }
}
</script>

• 打包转译配置缺失：如果项目的vue.config.js中配置了babel转译过滤规则，需要把chart.js加入转译列表，添加配置项 transpileDependencies: ['chart.js'] 后重启项目即可。

新手实操建议 #

• 初期优先使用封装好的vue专属适配组件，比直接调用原生Chart.js减少很多语法适配步骤，降低报错概率。
• 测试阶段先跑通基础柱状图、折线图示例，不要一开始就配置复杂的自定义样式、交互逻辑，基础实例运行正常后再逐步添加自定义配置。

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