node.js - 无法使用 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 模块与操作系统底层 API 对话，浏览器无法访问它们。

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

文件系统API

现在，有了这个相当新的浏览器 API，FileSystem API .

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

Webpack 配置

There is no webpack config file anywhere.

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

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