Vue项目集成vue-chartjs遇模块解析错误，求解决方法

核心问题：版本不兼容 #

vue-chartjs@4.0.0 要求依赖 chart.js@3.x及以上版本，你当前安装的chart.js@2.9.4版本过低，二者不兼容，这是导致模块解析错误的主要原因。以下提供两种解决方案：

方案一：升级chart.js到适配版本 #

1. 卸载旧版chart.js，安装兼容的3.x版本：

npm uninstall chart.js
npm install chart.js@^3.9.1

2. 调整BarChart组件代码以适配chart.js 3.x的API变化（关键差异点）：
   • 需手动注册图表控制器、元素等（chart.js 3.x不再自动全局注册）
   • 配置项结构调整，比如options.scales的层级变化
     示例组件代码：

<template>
  <canvas></canvas>
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart, registerables } from 'chart.js'

// 注册所有chart.js组件
Chart.register(...registerables)

export default {
  extends: Bar,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.chartOptions)
  }
}
</script>

方案二：降级vue-chartjs到适配chart.js 2.x的版本 #

如果不想修改组件代码，可将vue-chartjs降级到支持chart.js 2.x的版本：

1. 卸载当前vue-chartjs，安装3.x版本：

npm uninstall vue-chartjs
npm install vue-chartjs@^3.5.1

2. 保持原BarChart组件代码不变即可正常运行。

额外处理：webpack解析.mjs文件问题 #

若调整版本后仍出现chart.mjs解析错误，需在项目配置中添加对.mjs文件的支持：

• 若使用vue-cli，在vue.config.js中添加：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      ]
    }
  }
}

• 若使用自定义webpack配置，在webpack.config.js的module.rules中添加上述规则即可。

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