vue-chartjs安装后运行yarn dev报错：缺少loader及css-loader异常

核心原因 #

• 版本不匹配：vue-chartjs v5.x 仅支持 Vue 3 和 Chart.js v3+，但你使用的是 Chart.js v2.9.4，且项目为 Nuxt 2（基于 Vue 2），导致代码中出现的 Vue 3 API（shallowRef、expose）和 ES2020 语法（可选链?.）无法被旧编译环境处理。
• 样式加载器冲突：手动安装的高版本 css-loader 与 Nuxt 2 内置的 Webpack 版本不兼容，触发this.getOptions is not a function错误。

解决步骤 #

1. 安装兼容版本的 vue-chartjs #

vue-chartjs v4.x 适配 Vue 2 和 Chart.js v2.x，执行以下命令替换依赖：

yarn remove vue-chartjs
yarn add vue-chartjs@^4.1.1 chart.js@2.9.4

2. 移除冲突的样式加载器 #

Nuxt 2 已内置兼容的样式处理 loader，无需手动安装高版本，执行卸载：

yarn remove css-loader style-loader

3. 重启开发服务 #

yarn dev

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