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

Question

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

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

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

请帮帮我。

Answer 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，如前所述，因为它是在你的机器上运行的代码，而不是在浏览器中）。

Answer 2

将此添加到 webpack conf：

node: {
  fs: "empty"
}

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