无法使用 Vue CLI 3 要求“fs" [英] Unable to require 'fs' with Vue CLI 3

问题描述

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

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

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

请帮帮我.

解决方案

在引导应用程序时使用 FS 模块

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

const fs = require('fs');const someFileContents = fs.readFileSync('my-path-to-the-file');模块.出口 = {lintOnSave: 真,配置Webpack:配置=>{返回 {插件: [新的 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，如前所述，因为它是在你的机器上运行的代码，而不是在浏览器中).

I am developing a scheduling software for Windows 10, using Vue CLI 3.

The app needs to use "fs" module, but .. I could not find the way. There is no webpack config file anywhere. How can I solve the problem?

Vue CLI 3 is so different that I cannot use all the ways introduced at stackoverflow.

Please, help me.

解决方案

using FS module while bootstrapping the app

You can use fs when bootstrapping the application. For instance you could read a file in your file system to grab something, then add it to the application to use it somehow. If this is what you want (I doubt), you can just setup something like the following in your 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,
        })
      ]
    }
  },
}

And now, whenever you write somevar in your web app code, webpack will had it replaced -at compile time- with the contents of the file. This may have some uses I think, but never did it.

Using FS module in browser

Due to security reasons, you cannot use the fs module in the browser: you won't be able to setup a Vue component that lists filesystem items or write to disk. It is not a webpack, node nor Vue issue, it is due to security limitations of browsers. The native fs module of node.js talks to OS low level API's, and the browser can't access them.

should javascript be able to modify or read filesystems, a lot of devastating pretty bad security screw ups will arise.

The FileSystem API

Now, there is this pretty new browser API, the FileSystem API.

It does not allow to access user filesystem, yet it somehow simulates a sandboxed folder where your web application can store files. It may be useful for you depending on your use case, but does not have the greatest browser support.

 Webpack configuration

There is no webpack config file anywhere.

In fact, all your webpack stuff in a vue-cli 3 app should be done via the vue.config.js file: https://cli.vuejs.org/guide/webpack.html.

There you can execute arbitrary node.js code (in fact you can call fs from there, as said before, since it is code running on your machine, not in the browser).

这篇关于无法使用 Vue CLI 3 要求“fs"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！