vue报错Error:Cannot find module ‘fs/promises’的解决方式

针对“vue报错Error:Cannot find module 'fs/promises'”这个问题，我们可以按照以下步骤进行解决：

问题分析

这个问题通常会出现在使用 Vue 3.x 版本的时候，它提示我们在运行Vue项目时缺少了Node.js的fs模块，具体报错是“Cannot find module 'fs/promises'”。

造成这个问题的原因是，由于Vue 3.x的一些依赖包使用了Node.js的fs模块，在Browserify打包方式下，fs模块被移除了，所以在Vue 3.x版本运行时会出现上述错误。

解决方案

解决方式如下：

1. 升级Vue版本

由于问题是由Vue 3.x版本依赖包直接使用了Node.js的fs模块而导致的，因此升级Vue版本是一个可行的解决方案。

首先，需要全局安装Vue CLI 4.x或以上版本：

npm install -g @vue/cli

然后，更新项目中的Vue版本：

vue upgrade --next

执行上述操作后，升级完成，之后就可以再次运行Vue项目了。

2. 使用webpack打包方式

使用webpack打包方式可以解决上述问题。

首先，需要安装Vue Loader和Vue组件。

npm install vue-loader vue-template-compiler -D

然后在webpack.config.js中进行配置：

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // ...
    ]
  },
  plugins: [
    // ...
    new VueLoaderPlugin()
  ]
}

配置完成后，重新运行项目即可。

示例说明

示例1

项目运行时出现“vue报错Error:Cannot find module 'fs/promises'”问题，使用升级Vue版本的解决方法进行升级。

npm install -g @vue/cli
vue upgrade --next

执行上述命令后成功解决问题。

示例2

项目运行时出现“vue报错Error:Cannot find module 'fs/promises'”问题，使用webpack打包方式的解决方法。

npm install vue-loader vue-template-compiler -D

之后在webpack.config.js文件中进行配置，然后重新运行项目即可。