Elecrton在vite + vue3中的奇葩问题

记录一下学习过程中遇到的奇葩问题. 

首先需要明确几点东西

1. 在开发环境下通过 electron . 脚本启动的应用只是一个空壳, 你需要调用BrowserWindow构建的窗口对象去加载本地已经启动的项目, 如下所示

mainWindow.loadURL('http://localhost:3001');

2. 如果你想在src目录下创建electron的相关文件, 并且使用ES+ts的语法, 你需要为electron新建一个tsc编译的tsconfig.ts. 将相关的文件编译为CommonJS的标准后再执行.

3. 打包后的electron项目请求是不存在跨域问题的, 在vite.config中配置的请求代理会失效. 而electron会将请求的域名改为本地文件路径, 所以需要在打包后的环境中编辑请求地址

 

1. 判断electron运行时的环境

可以在主进程中直接调用 app.isPackaged 来判断当前app是否做了打包, 并以此判断是执行加载本地链接地址, 还是实际的打包后文件.

 

2. 打包后请求路径不正确

 需要在打包后修改请求地址的前缀, 默认是本地的文件路径, 从electron中引入session

    const { defaultSession } = session;
    // 替换请求路径
    defaultSession.webRequest.onBeforeRequest((details, callback) => {
      let { url } = details;
      // ...判断和修改逻辑逻辑
      callback({
        // 是否取消请求
        cancel: false,
        redirectURL: url,
      });
    });

从第一个参数中获取链接地址, 再进行修改, 然后调用第二个回调函数来完成请求

 

3.preload中的ipcRenderer.removeListener没有生效

1. 首先需要确定在 渲染器或者说在vue组件中, 你向preload的removeListener传递的是相同的函数, 这里不做过多说明

2. 其次, 在preload中, 在收到函数并作on事件的绑定时, 可以用变量或数组将这些函数存起来, 当你在向removeListener传递函数时, 可以将它们做全等验证. 结果是false

3. 把每次传入的不同函数, 在preload中用ID做匹配存放起来, 在调用removeListener时, 不直接传递函数, 而是传递绑定的函数ID, 根据ID获取之前存放在preload中的函数, 将该函数传入removeListener

 大概就像下面这样

const handlers: { [key: string]: (...args: any[]) => void } = {};

// ...省略代码

  receive: (
    channel: string,
    funcID: string,
    func: (...args: any[]) => void
  ) => {
    ipcRenderer.on(channel, func);
    handlers[funcID] = func;
  },
  removeListener: (channel: string, funcID: string) => {
    ipcRenderer.removeListener(channel, handlers[funcID]);
  },