@vue/cli4升级@vue/cli5 node.js polyfills错误的解决方式

接下来我将为您详细讲解“@vue/cli4升级@vue/cli5 node.js polyfills错误的解决方式”的完整攻略。

背景

在使用@vue/cli4升级到@vue/cli5的过程中，运行vue upgrade命令可能会出现以下错误：

Error: The @vue/cli-upgrade package requires Node.js version 10.13 or later to run.
    at Object.<anonymous> (/usr/local/lib/node_modules/@vue/cli-upgrade/lib/env.js:177:13)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    ...

这个错误提示告诉我们，要使用@vue/cli-upgrade包进行升级，需要使用Node.js版本10.13或以上。如果我们的机器上没有安装正确的Node.js版本，会导致这个错误。

解决方案

方案一：更新Node.js版本

如果我们的机器上没有安装Node.js或者安装的版本低于10.13，则需要更新Node.js到正确的版本。最新的Node.js版本可以从官网 https://nodejs.org/en/ 下载。

需要注意的是，更新Node.js版本可能会导致一些依赖于旧版本Node.js的项目出现问题。因此，我们需要在更新之前备份好相关项目。

方案二：添加Node.js polyfills

如果我们不能或者不想更新Node.js版本，还可以通过添加Node.js polyfills的方式解决这个问题。Node.js polyfills是用来模拟Node.js原生功能的JavaScript代码，可以在浏览器环境下模拟Node.js环境。在这种情况下，我们需要添加的是node-fetch和buffer这两个库。

添加node-fetch库

node-fetch库是用来实现Fetch API的库。在浏览器环境下，我们可以使用原生的Fetch API，但是在 Node.js 环境下却不支持原生的Fetch API。因此，我们需要使用node-fetch来模拟Fetch API。

首先，我们需要安装node-fetch：

npm install node-fetch --save

然后，在我们的代码中引入node-fetch：

import fetch from 'node-fetch'

现在，我们就可以在浏览器环境下使用原生Fetch API，在Node.js环境下则使用node-fetch模拟的Fetch API了。

添加buffer库

buffer库是Node.js提供的用来处理二进制数据的库。在浏览器环境下，我们通常使用ArrayBuffer对象来处理二进制数据。但是在Node.js环境下，由于没有ArrayBuffer对象，我们需要使用buffer来代替。

首先，我们需要安装buffer：

npm install buffer --save

然后，在我们的代码中引入buffer：

import { Buffer } from 'buffer'

现在，我们就可以在浏览器环境下使用ArrayBuffer对象，在Node.js环境下则使用buffer代替了。

示例说明

假设我们已经使用@vue/cli4创建了一个Vue项目，现在需要升级到@vue/cli5。在命令行中，我们输入以下命令：

vue upgrade

但是却出现了以下错误提示：

Error: The @vue/cli-upgrade package requires Node.js version 10.13 or later to run.
    ...

这个错误提示告诉我们需要使用Node.js版本10.13或以上。我们可以选择升级Node.js版本，或者添加Node.js polyfills。

示例一：更新Node.js版本

如果我们选择更新Node.js版本，并且安装了正确的版本后，再次运行vue upgrade命令，就不会出现上述错误提示了。

示例二：添加Node.js polyfills

如果我们选择添加Node.js polyfills，我们需要在配置文件vue.config.js中添加以下代码：

const nodePolyfills = [
  'node-fetch',
  'buffer'
]

module.exports = {
  configureWebpack: {
    resolve: {
      fallback: {
        ...nodePolyfills.reduce((acc, name) => ({ ...acc, [name]: require.resolve(name) }), {})
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
        Buffer: ['buffer', 'Buffer']
      })
    ],
  }
}

这段代码的主要作用是在Webpack配置中添加Node.js polyfills。其中：

• resolve.fallback用来解决Webpack在处理模块时找不到Node.js模块的问题；
• plugins用来模拟Node.js全局变量和模块。

在添加这段代码后，再次使用vue upgrade命令就可以成功升级到@vue/cli5了。