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

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

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

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

在您的 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

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