无法使用 Vue CLI 3 要求“fs”

Posted 2023-02-22

【中文标题】无法使用 Vue CLI 3 要求“fs”

【英文标题】：Unable to require 'fs' with Vue CLI 3

【发布时间】：2019-02-24 12:03:09

【问题描述】：

我正在使用 Vue CLI 3 为 Windows 10 开发调度软件。

应用程序需要使用“fs”模块，但是..我找不到方法。任何地方都没有 webpack 配置文件。我该如何解决这个问题？

Vue CLI 3 如此不同，以至于我无法使用 *** 中介绍的所有方法。

请帮帮我。

【问题讨论】：

How to use FS module inside Electron.Atom\WebPack application?的可能重复

是的，我试过了。但重点不是 Electron，而是 Vue CLI “3”。谢谢。

这不是重复的——奇怪的是，我可以确认在我自己的 Vue CLI 3 衍生项目中，使用 https 完全没有问题，而使用 fs.readFile() 错误，因为 fs 只是一个空对象。

如果你说的是在客户端 vue 应用程序中使用 Node fs，那是不可能的；由于显而易见的原因，浏览器不会让您访问用户的文件系统。如果您仅将 vue 用于服务器端渲染并希望从服务器读取文件，则可能是可行的；我不确定，因为我从未尝试过这样的事情。

我想我过去也遇到过类似的问题，并通过npmjs.com/package/file-system 解决了。记不太清了，可能记错了。但由于 OP 提供的相关信息很少，我想它可能会简单得多。

【参考方案1】：

在引导应用时使用 FS 模块

您可以在引导应用程序时使用fs。例如，您可以读取文件系统中的文件以获取某些内容，然后将其添加到应用程序中以某种方式使用它。如果这是您想要的（我怀疑），您可以在 vue.config.js 中设置类似以下内容：

const fs = require('fs');

const someFileContents = fs.readFileSync('my-path-to-the-file');

module.exports = 
  lintOnSave: true,

  configureWebpack: config => 
    return 
      plugins: [
        new webpack.DefinePlugin(
          'somevar': someFileContents,
        )
      ]
    
  ,

现在，每当您在 Web 应用程序代码中编写 somevar 时，webpack 都会在编译时将其替换为文件的内容。我认为这可能有一些用途，但从未这样做过。

在浏览器中使用 FS 模块

出于安全原因，您不能在浏览器中使用fs 模块：您将无法设置列出文件系统项或写入磁盘的 Vue 组件。这不是 webpack、node 或 Vue 的问题，这是由于浏览器的安全限制。 node.js 的原生 fs 模块与 OS 低级 API 对话，浏览器无法访问它们。

如果 javascript 能够修改或读取文件系统，就会出现很多毁灭性的非常糟糕的安全问题。

文件系统 API

现在，有了这个全新的浏览器 API，FileSystem API。

它不允许访问用户文件系统，但它以某种方式模拟了一个沙盒文件夹，您的 Web 应用程序可以在其中存储文件。根据您的用例，它可能对您有用，但没有最好的浏览器支持。

 Webpack 配置

任何地方都没有 webpack 配置文件。

事实上，你在 vue-cli 3 应用程序中的所有 webpack 内容都应该通过 vue.config.js 文件：https://cli.vuejs.org/guide/webpack.html 完成。

在那里你可以执行任意的 node.js 代码（事实上你可以从那里调用fs，如前所述，因为它是在你的机器上运行的代码，而不是在浏览器中）。

【讨论】：

谢谢，我最终只需要文件系统 API - 因为用户选择通过将文件拖到窗口中来上传文件，所以我根本不需要从磁盘写入或读取.干杯

我收到webpack is not defined 第一个解决方案。

@RedGuy11 我很久以前写过这个答案。我最好的选择是一开始我错过了const webpack = require('webpack')，但我不确定是不是这样。

是的，这就是问题所在。还有一点我想不通（对于其他有同样问题的人）：Webpack 会自动在someFileContents 上调用JSON.parse，所以你可能需要自己调用JSON.stringify。

【参考方案2】：

将此添加到 webpack conf：

node: 
  fs: "empty"

正如@Sergeon 所说，fs 不适用于浏览器。

【讨论】：

如何通过vue.config.js添加这个？

你应该在某个地方有一个 webpack.conf.js

@"Gonzalo Lorieto" 过去的歌，也许... cli.vuejs.org/guide/… 它是动态生成的，因此对它的任何更改都不会持续存在，应该通过 vue.config 的 configureWebpack 和 chainWebpack 道具进行...而且很难推断出其中的确切内容。