vue.js - vue + electron 如何将文件写入磁盘

Question

我正在使用 Vue 和 Electron 构建桌面应用程序。我想从 vue 组件保存一个文件，其中包含用户引入的一些数据。为此，我尝试在 vuex 操作中使用 fs 节点模块，但它让我出错。找不到那个模块。我知道 Vue 是客户端，但是，我认为在与 Electron 一起使用时它可以工作，但事实并非如此。为了初始化我的应用程序，我使用了 vue-cli 和命令 vue init webpack electron-vue。我正在使用 vuex 系统并且也在使用 vuex 模块，我有一个 actions.js 文件，我在其中尝试使用 fs 模块:

// import * as fs from 'fs'; I used this way at first
const fs = require('fs');
export const writeToFile = ({commit}) => {
 fs.writeFileSync('/path/file.json', JSON.stringify(someObjectHere));
};

当我从 Vue 组件调用此操作时，例如 Options.vue，我使用 vuex 调度系统，并且在该组件的 created() 方法中:

this.$store.dispatch('writeToFile')

这引起了我上面提到的错误

Answer 1

要在 Vue 和 WebPack 中使用 electron 中的文件系统，必须在执行命令“npm run build”后在 dist/index.html 中声明文件系统实例

<script>
    var fs = require('fs');
</script>

而在 vue 组件中，它使用 fs 就像它已经在 vue 文件中声明一样。

...
export const writeToFile = ({commit}) => {
    fs.writeFileSync('/path/file.json', SON.stringify(someObjectHere))
};
...

如果不在 electron 中使用它，或者你将它写入 dev 的索引中，它会抛出一个错误。