Vue+Electronでrequire("fs")を使うとエラーが出る

Question

Vue+Electronでアプリ開発を行っています。
ファイルの出力を行いたくコードを書いたところ、エラーが出ています。

色々調べてみましたがうまくいかないため教えていただきたいです。

発生している問題・エラーメッセージ

「fs.writeFile is not a function」

該当のソースコード

<template>
    <div class="header">
     <button type="button"  v-on:click="filemake">ファイル作成</button>
     
    </div>
    
</template>

<script>

const fs = require('fs');
export default {
  name: 'Home',
  components: {

  },
  data() {
    return { 
      
    }
  },
  computed:{
    
  },  
  methods: {
    
    filemake(){
     let text = "テスト出力";
      
      fs.writeFileSync('out.txt', text, (err) => {
       if(err) console.log(err);
       else console.log('write end');
      });


    }
  }
}
</script>

試したこと

ルートディレクトリにvue.config.jsを追加
参考ページ

module.exports = {
    pluginOptions: {
      electronBuilder: {
        nodeIntegration: true
      }
    }
  }

Answer 1

こんにちは。

もしかしたら、chromeなどのブラウザ上で動作されていませんでしょうか？
セキュリティ上の理由から、ブラウザでfsモジュールを使用することはできないようです。

以下のコマンドで、electronのアプリとして動作させると動作すると思います。

npm run electron:serve

Comments

[iwanao513]

ご回答ありがとうございます！

ブラウザではなくelectronのアプリとして起動しているのですが、うまくいきません・・・・

[s-washion]

既にelectronアプリで動作されていたのですね、すいません。

貼り付けて頂いたソースをこちらでも動かしてみたところ、
正常に動作しましたのでソースは問題ないと思います。

あとは、vue.config.jsの場所（プロジェクト名のフォルダの直下。publicではない）の確認や
再ビルドしてみるとかでしょうか・・・
お役に立てず、すいません

[iwanao513]

お返事遅れてすいません！
ご回答ありがとうございます！
現在は別のやり方でファイルの出力を行いました。
コードに問題ないということなので場所等変えてみて試してみます！
ありがとうございます！