vue-cli - Vue-CLI运行构建TypeError '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的SizeLimitsPlugin.js的第43行可以在这里看到:

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

如错误消息所建议，它正在尝试访问asset.name。

看起来这行在最近几天发生了更改，并且更改已添加到4.40.0版本中。我对这段代码不太熟悉，无法确定是否应该为错误负责，但它是可疑的。

似乎其他Vue用户也遇到了相同的问题:

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

在此建议了几种解决方法。例如。:

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

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并进入项目的配置，则也可以通过UI设置 productionSourceMap: false和 vue ui设置。