Vue-cli 运行构建类型错误 'name' 未定义

Question

我刚开始使用vue-cli，遇到了问题

按照文档说明进行操作：

我安装了 vue/cli npm install -g @vue/cli（版本 3.11.0）。
我在文件夹中创建了一个项目 vue create test（默认配置）和 cd。
但是当我尝试构建项目 npm run build 时，出现了这个错误。

TypeError: Cannot read property 'name' of undefined
    at entrypoint.getFiles.reduce (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:43:25)
    at Array.reduce (<anonymous>)
    at getEntrypointSize (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:40:27)
    at compiler.hooks.afterEmit.tap.compilation (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:75:18)
    at _next0 (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
    at _err0 (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at callback (C:\Users\MyUser\test\node_modules\copy-webpack-plugin\dist\index.js:126:17)
    at afterEmit (C:\Users\MyUser\test\node_modules\copy-webpack-plugin\dist\index.js:220:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\MyUser\test\node_modules\tapable\lib\Hook.js:154:20)
    at asyncLib.forEachLimit.err (C:\Users\MyUser\test\node_modules\webpack\lib\Compiler.js:482:27)
    at C:\Users\MyUser\test\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\MyUser\test\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at outputFileSystem.writeFile.err (C:\Users\MyUser\test\node_modules\webpack\lib\Compiler.js:464:33)
    at C:\Users\MyUser\test\node_modules\graceful-fs\graceful-fs.js:57:14

我在 PC 的不同文件夹中尝试过，以防某些文件发生冲突但没有成功。知道我该如何解决这个问题吗？

Answer 1

更新： 这是 Webpack 4.40.0 和 4.40.1 中的错误，现在应该是 fixed.

Webpack 的第 43 行 SizeLimitsPlugin.js 可以在这里看到：

https://github.com/webpack/webpack/commit/758269e81456c946a96b521ee936dbec99d07132#diff-cf9a43cf0e0fef12e89091cd183c607dR43

根据错误消息的建议，它正在尝试访问 asset.name。

这行似乎在最近几天发生了变化，并且在 4.40.0 版本中进行了更改。我对该代码不够熟悉，无法确定是否应该为该错误负责，但它是可疑的。

似乎其他 Vue 用户运行遇到了同样的问题：

https://github.com/vuejs/vue-cli/issues/4572

那里建议了几种解决方法。例如：

在 package.json 旁边创建一个名为 vue.config.js 的文件，并将以下代码添加到该文件中：

module.exports = {
  css: {
    sourceMap: true
  }
}

或者您可以使用：

module.exports = {
  productionSourceMap: false
}

或：

module.exports = {
  configureWebpack: {
    devtool: "eval-source-map"
  }
}

有关这些内容的更多信息，请参阅 https://cli.vuejs.org/config/#vue-config-js

设置 sourceMap: true 和 productionSourceMap: false 也可以通过 UI 设置，如果您运行 vue ui 并进入项目配置。

Vue-cli 运行构建类型错误 'name' 未定义

Vue-cli run build TypeError 'name' Undefined

vue-cli

vue-cli-3

Vue-cli 运行 构建类型错误 'name' 未定义

Vue-cli run build TypeError 'name' Undefined

vue-cli

vue-cli-3

Vue-cli 运行构建类型错误 'name' 未定义