vue-chartjs 5报错求助：无适配Loader处理文件，换版本仍未解决

开发者阿泽

2026-7-28

Vue 2.7 搭配 vue-chartjs 5.x 运行报错的解决方法

当前使用的依赖版本

vue-chartjs: ^5.2.0
chart.js: ^4.2.1
vue: 2.7.14

遇到的问题

确认版本兼容后运行项目，出现报错：

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

尝试将chart.js切换为3.9.1版本，问题仍未解决，报错信息变为：

error  in ./node_modules/vue-chartjs/dist/index.js

Module parse failed: Unexpected token (198:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

解决方案

方案一：配置Webpack转译vue-chartjs

vue-chartjs 5.x的输出代码包含ES6+新语法，但Vue 2.7默认的Webpack配置不会转译node_modules目录下的文件，导致解析失败。需要修改Webpack配置，让babel-loader处理vue-chartjs：

安装必要依赖（如果未安装）：

npm install babel-loader @babel/core @babel/preset-env --save-dev

修改vue.config.js（或Webpack配置文件）：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          // 排除node_modules，但不排除vue-chartjs
          exclude: /node_modules(?!\/vue-chartjs)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
}