vue+electron中的app.vue中使用require，導致頁面空白

代碼

<template>
  <div id="app">
    <div class="titleBar">
      <div class="title">
        <div class="logo">
          <img src="@/assets/logo.png" />
        </div>
        <div class="txt">My APP</div>
      </div>

      <div class="windowTool">
        <div @click="minisize">
          <i class="iconfont iconminisize"></i>
        </div>
        <div v-if="isMaxSize" @click="restore">
          <i class="iconfont iconrestore"></i>
        </div>
        <div v-else @click="maxsize">
          <i class="iconfont iconmaxsize"></i>
        </div>
        <div @click="close" class="close">
          <i class="iconfont iconclose"></i>
        </div>
      </div>
    </div>

    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
  let { remote } = require('electron');

  export default {
    methods: {
      close() {
        remote.getCurrentWindow().close();
      },
      minisize() {
        remote.getCurrentWindow().minimize();
      },
      restore() {
        remote.getCurrentWindow().restore();
      },
      maxsize() {
        remote.getCurrentWindow().maximize();
      },
      data() {
        return {
          isMaxSize: false
        };
      },
      mounted() {
        let win = remote.getCurrentWindow();
        win.on('maximize', () => {
          this.isMaxSize = true;
          this.setState();
        });

        win.on('unmaximize', () => {
        this.isMaxSize = false;
        this.setState();
        });
      },
    }
  };
</script>

問題描述

運行Electron+Vue項目后，應用顯示空白，並報如下錯誤：

Uncaught ReferenceError: __dirname is not defined
    at eval (index.js?bdb9:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:1057)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (App.vue?234e:40)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (App.vue?c53a:1)
    at Module../src/App.vue?vue&type=script&lang=js& (app.js:1029)

問題原因

渲染進程屬於瀏覽器端，沒有集成Node的環境

解決方案

創建渲染進程時，開啟node環境，將 nodeIntegration 設置為 true

  win = new BrowserWindow({
    frame: false,
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
   })

衍生問題

開啟后，依然報如下錯誤：

Uncaught TypeError: fs.existsSync is not a function
    at getElectronPath (index.js?bdb9:7)
    at eval (index.js?bdb9:18)
    at Object../node_modules/electron/index.js (chunk-vendors.js:1057)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (App.vue?234e:40)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (App.vue?c53a:1)

衍生問題解決方案

創建 preload.js 文件，並在 創建渲染進程時的 webPreferen中設置預加載preload：

  win = new BrowserWindow({
    frame: false,
    width: 800,
    height: 600,
    webPreferences: {
      // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
      nodeIntegration: false,
      preload: __dirname + '\\..\\src\\preload.js'
  })

preload.js 文件代碼如下：

window.remote = require('electron').remote;

並且將渲染進程的js文件中的JavaScript代碼修改如下：

// 將此行代碼替換為下面一行，不要使用require
// let { remote } = require('electron');

const remote = window.remote; 

特別說明：因為運行后的根目錄是dist_electron目錄，所以這個目錄我前面做了重定向，將其定向到preload.js中。正式環境應該是不能用的，具體正式環境要怎么解決，目前我也沒有搞清楚。

最終解決方案

上面衍生問題解決方案中，每次都用腳本注入的方式畢竟不方便，也不是很好使用。所以可以用如下解決方案：

不使用require關鍵字，而使用window.require("XXXX")

# 原來的代碼
const { remote } = require('electron');

# 修改后的代碼
const { remote } window.require('electron'); 

參考資料

1. TypeError: fs.existsSync is not a function | import { ipcRenderer } from 'electron'

2. Uncaught TypeError: fs.existsSync is not a function錯誤

3. create-react-app和electron報錯fs.existsSync is not a function

4. Electron報Uncaught ReferenceError: require is not defined