Vue CLI 4 错误：Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') 解决方法

问题描述：

在使用 Vue CLI 4 构建项目时，可能会遇到以下错误：

'Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')'

这个错误通常发生在使用 Babel 7 和 Vue CLI 4 的组合中，并且是由于某些依赖项未正确编译而导致的。

解决方法：

可以尝试以下解决方案来解决此问题：

1.升级 Vue CLI 和 Babel

首先，确保您使用的是最新版本的 Vue CLI 和 Babel。您可以通过以下命令来检查版本：

vue --version
babel --version

如果您的版本不是最新的，请通过以下命令升级：

npm install -g @vue/cli
npm install -g babel

2.安装 Babel 插件

在项目的根目录下安装以下 Babel 插件：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

3.在项目配置文件中添加以下配置

在项目的根目录下，打开 'vue.config.js' 文件，并添加以下配置：

module.exports = {
  // ts6 => ts5
  transpileDependencies: ['flv.js', 'webpack-dev-server/client'],
  chainWebpack: (config) => {
    config.entry.app = ['babel-polyfill', './src/main.js'];
  },
  babel: {
    plugins: [
      '@babel/plugin-transform-runtime'
    ],
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'usage',
          corejs: 3
        }
      ]
    ]
  }
}

这个配置将启用 Babel 插件，并确保您正在使用正确的 preset。

4.重新启动项目

完成上述更改后，重新启动项目并检查是否已解决错误。

参考链接：

• https://stackoverflow.com/questions/63032322/vue-cli-4-uncaught-typeerror-cannot-read-properties-of-undefined-reading-for
• https://babeljs.io/docs/en/babel-plugin-transform-runtime
• https://babeljs.io/docs/en/babel-preset-env