問題描述

我正在使用 Vue 和 Electron 構建一個桌面應用程序.我想從一個 vue 組件中保存一個文件，其中包含用戶介紹的一些數據.為此，我嘗試在 vuex 操作中使用 fs 節點模塊，但它讓我出錯.找不到那個模塊.我知道 Vue 是客戶端，但是，我認為在與 Electron 一起使用時它可以工作，但事實并非如此.為了初始化我的應用程序，我使用了 vue-cli 和命令 vue init webpack electron-vue.我正在使用 vuex 系統和 vuex 模塊，我有一個 actions.js 文件，我嘗試使用 fs 模塊:

I'm building a desktop app using Vue and Electron. I want to save a file from a vue component with some data introduced by the user. For doing that, I tried used fs node module inside an vuex action, but it got me error. Can't found that module. I know Vue is client side, but, I thought that at the moment of using with Electron it could work, but it does't. To init my app I used vue-cli and the command vue init webpack electron-vue. I'm using vuex system and using vuex modules too, I've an actions.js file where I tried to use the fs module:

// 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() 方法中:

When I call this action from a Vue component, ex, Options.vue, I use the vuex dispatch system, and, in the created() method of that component:

this.$store.dispatch('writeToFile')

這引起了我上面提到的錯誤

That's raised me the error above mentioned

推薦答案

要在electron中使用文件系統與Vue和WebPack，文件系統實例必須在執行命令npm run"后在dist/index.html中聲明構建"

to use File System in electron with Vue and WebPack, the file system instance has to be declared in the dist/index.html after execute the command "npm run build"

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

在 vue 組件中，它使用 fs 就像在 vue 文件中聲明一樣.

and in the vue component, it 's used fs like if it would have been declared in the vue file.

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

如果不在 electron 中使用，或者將其寫入 dev 的索引中，則會引發錯誤.

while if not use it in electron or you write it in the index to dev, it throws an error.

這篇關于vue + electron 如何將文件寫入磁盤的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！