vue_electron打开新窗口遇到的问题

1.我们采用的时候主程序(background.js)使用ipcMain进行创建窗口，第一步我们要先在主程序引用

import { app, BrowserWindow, ipcMain } from 'electron'

2.在主程序中写入监听事件

const winURL =
  process.env.NODE_ENV === "development"
    ? `http://localhost:8080` // 开发路径
    : `file://${__dirname}/index.html`; //生产路径
ipcMain.on("open-new-window", () => {
   let newWindow = new BrowserWindow({
      width: 1107, //窗口宽高
      height: 603,10       closable: true,
      resizable: false, //禁止窗口随意拉伸
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true,
      },
    });
    newWindow.loadURL(winURL + "#/about");
    newWindow.on("closed", () => {
      newWindow = null;
    });
  });

3.在vue文件中进行使用

第一种引入方式：import { ipcRenderer} from 'electron';
 
第一种方式有时会报错
 error  in ./node_modules/electron/index.js

Module not found: Error: Can't resolve 'fs' in 'D:\electron\cheshi\node_modules\electron'

 error  in ./node_modules/electron/index.js

Module not found: Error: Can't resolve 'path' in 'D:\electron\cheshi\node_modules\electron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

ERROR in ./node_modules/electron/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in 'D:\electron\cheshi\node_modules\electron'
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/AboutView.vue?vue&type=script&lang=js 3:4-23
 @ ./src/views/AboutView.vue?vue&type=script&lang=js 1:0-202 1:218-221 1:223-422 1:223-422
 @ ./src/views/AboutView.vue 2:0-60 3:0-55 3:0-55 9:2-8
 @ ./src/router/index.js 12:19-51
 @ ./src/main.js 3:0-30 7:2-8

ERROR in ./node_modules/electron/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in 'D:\electron\cheshi\node_modules\electron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/AboutView.vue?vue&type=script&lang=js 3:4-23
 @ ./src/views/AboutView.vue?vue&type=script&lang=js 1:0-202 1:218-221 1:223-422 1:223-422
 @ ./src/views/AboutView.vue 2:0-60 3:0-55 3:0-55 9:2-8
 @ ./src/router/index.js 12:19-51
 @ ./src/main.js 3:0-30 7:2-8
 
第二种引入方式：const { ipcRenderer } = require("electron");
需要在vue.config里配置

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 关闭语法检查
  pluginOptions: {//主要添加代码
    electronBuilder: {
      nodeIntegration: true, //
      customFileProtocol: "./", // 自定义文件协议
    }
  }
});

此方法借鉴与：https://blog.csdn.net/qq_59599812/article/details/132877714