vue+electron问题汇总

1. Vue_Bug Failed to fetch extension, trying 4 more times

描述：项目启动时报错

解决：注释图片中内容

2. Module not found: Error: Can’t resolve ‘fs’ in

描述：项目启动报错

解决：vue.config.js中添加图中数据

3.导入electron.remote后，remote为undefined

解决： 开启remote模块

enableRemoteModule: true

4.electron 点击事件无效

解决：

给点击的按钮加
-webkit-app-region: no-drag; 就可以点击了

5. electron设置frame:false后close关闭方法失效

解决：

关闭按钮所在vue页面

<i class="el-icon-close" @click="handelClose"></i>
// 方法
// 引入
import { remote, ipcRenderer } from 'electron';
// 使用
handelClose() {
   this.$confirm('确定退出?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
       type: 'warning'
   }).then(() => {
      ipcRenderer.send('window-close')
   }).catch(() => {});
},

background.js文件添加

ipcMain.on('window-close',function (){
   win = null // 主窗口设置为null防止内存溢出, win设置为全局变量，默认是常量
   app.exit()
})

6. 打包后启动报错，Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax,

原因：使用了两种导入导出方式

即：“module.exports及require是属于commonJS”,而"export default及import则属于ES6"

解决：

方法一： 只使用commonJS或者ES6
方法二：使用babel，它支持两种导入导出

安装包：npm install --save-dev @babel/plugin-transform-modules-commonjs

babel.config.js添加设置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      '@babel/plugin-transform-modules-commonjs',
      {
        allowTopLevelThis:true,
      },
    ],
  ]
}

7. 使用setSize自定义拖拽方法后，分辨率不是100%的话，拖住时会不停放大

解决：

1. utils.js->index.js 定义拖拽方法工具类

import { ipcRenderer } from 'electron';
export function winMousemove(e, width, height) {
  let isKeyDown = true
  let dinatesX = e.x
  let dinatesY = e.y
  let dinatesW = width
  let dinatesH = height
  document.onmousemove = (ev) => {
    if (isKeyDown) {
      const x = ev.screenX - dinatesX
      const y = ev.screenY - dinatesY
      //给主进程传入坐标
      let data = {
        appX: x,
        appY: y,
        curWin: 'tipMessageWin',
        width: dinatesW,
        height: dinatesH
      }
      ipcRenderer.send('custom-adsorption', data)
    }
  };
  document.onmouseup = (ev) => {
    isKeyDown = false
  };
}

2. vue文件中使用方法

<template>
  <div class="unloadApp" @mousedown="winMousemove($event)"></div>
</template>
<script>
import { winMousemove } from '@/utils/index'
export default {
	 methods: {
	    winMousemove(e) {
	      winMousemove(e, 400, 450)
	    },
    }
}
</script>

3. background.js配置文件中修改窗口位置

ipcMain.on('custom-adsorption', (event, res) => {
	win.setBounds({x: res.appX, y: res.appY, width: res.width, height: res.height})
})

8. mac环境下打包后，点击应用图标启动项目发现窗口没有显示，当点击任务栏图标时页面才打开

原因：

当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。

为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。

因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。

解决：

在background.js中添加设备判断，因为只有win和mac两个环境就没有判断linux

if(process.platform === 'win32') {
    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  } else {
    app.whenReady().then(() => {
      createWindow()
    
      app.on('activate', function () {
        // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
        // 打开的窗口，那么程序会重新创建一个窗口。
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
      })
    })
  }

9. mac环境下当窗口大于屏幕时，底部任务栏会遮住底部部分窗口

原因：当窗口太大时会适应屏幕最大化，底部任务栏没有设置隐藏

解决：

当窗口打开时添加判断，如果窗口大于屏幕重新设置窗口大小为可用屏幕大小（不包含mac标签和底部任务栏）
background.js中添加

var aiMeetingMinutesWin = null
// 封装创建窗口方法
const windowBaseConfig = {
  width: 830,
  height: 520,
  artifactName: '名称',
  icon: path.join(__dirname, "../public/favicon.ico"),
  frame: false, // 不显示顶部导航
  show: false,  // 不自动显示
  resizable: false, //窗口宽高禁止拉动
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true,
    webviewTag: true,     //开启webview
    webSecurity: false,
    allowDisplayingInsecureContent: true,
    allowRunningInsecureContent: true,
  }
};
// 某个太大的窗口
function openAiMeetingMinutesWin(dataObj) {
  if(aiMeetingMinutesWin) {
    aiMeetingMinutesWin.show()
    return
  }
  aiMeetingMinutesWin = new BrowserWindow(Object.assign({}, windowBaseConfig, {
    width: 1280,
    height: 800,
  }));

  // aiMeetingMinutesWin.webContents.openDevTools();
  aiMeetingMinutesWin.loadURL(`${winURL}#${dataObj.path}?meetingId=${dataObj.meetingId}`);
  aiMeetingMinutesWin.on('ready-to-show',()=>{
    aiMeetingMinutesWin.show();
    // 获取窗口宽高
    const aiMeetingMinutesBounds = aiMeetingMinutesWin.getBounds()
    // 获取屏幕信息
    const aiMeetingMinutesScreen =  screen.getDisplayNearestPoint({x: aiMeetingMinutesBounds.x, y: aiMeetingMinutesBounds.y})
    if (aiMeetingMinutesScreen.workAreaSize.width < aiMeetingMinutesBounds.width || aiMeetingMinutesScreen.workAreaSize.height < aiMeetingMinutesBounds.height) {
    	// 重新设置窗口大小
    	aiMeetingMinutesWin.setSize(aiMeetingMinutesScreen.workAreaSize.width, aiMeetingMinutesScreen.workAreaSize.height)
    }
  })
  aiMeetingMinutesWin.on('closed',()=>{
    aiMeetingMinutesWin=null;
  })
  global.sharedObject.aiMeetingMinutesWinId = aiMeetingMinutesWin.webContents.id
}

10. mac环境下设置父子关系的窗口后，子窗口不能拖动

原因：

在Electron中，如果你在macOS环境下创建了一个窗口，并且尝试将其设置为有父窗口或模态窗口，你可能会遇到无法移动窗口的问题。这是因为macOS有一套自己的窗口管理规则，其中一项是不允许用户移动模态窗口。

解决：

1. 如果你的目的是创建一个模态窗口，但允许用户移动它，你可以在创建窗口时不将其标记为模态。例如，在Electron中，你可以使用parent选项来指定父窗口，但不使用modal: true。

const { BrowserWindow } = require('electron');
 
let parentWindow = new BrowserWindow({ /* 父窗口的选项 */ });
let childWindow = new BrowserWindow({
  parent: parentWindow,
  modal: false, // 确保不是模态窗口
  // 其他选项
});

2. 如果你需要窗口作为模态窗口，但又想在macOS上允许移动，你可能需要通过原生代码或第三方库来绕过Electron的限制。这通常涉及到更深层次的操作系统级别的调整，并可能需要处理用户的操作系统版本和其他兼容性问题。

…待续