vue + electron实现浏览器ctrl f踩过的坑

最新推荐文章于 2025-06-29 12:17:13 发布

西瓜味的桃子

最新推荐文章于 2025-06-29 12:17:13 发布

阅读量1.1k

点赞数 12

CC 4.0 BY-SA版权

文章标签： vue.js electron 前端

本文链接：https://blog.youkuaiyun.com/weixin_41843107/article/details/137085680

项目前提：公司用Vue开发了个项目，部署到现场后要求打包成exe应用。
**版本： Node版本 16.13.2    Electron版本 13.6.9**

1、在项目中集成Electron

Vue项目添加Electron-builder打包工具，添加成功后src文件夹下生成background.js文件

vue add electron-builder

vue.config.js增加配置(打包后不加密)

pluginOptions: {
   
   
	electronBuilder: {
   
   
		builderOptions: {
   
   
			nsis: {
   
   
		         allowToChangeInstallationDirectory: true,
		         oneClick: false
			},
			electronDownload: {
   
   
				mirror: "https://npm.taobao.org/mirrors/electron/"
			},
			win: {
   
   
         		target: "nsis",
				icon: './build/logo.ico', // exe图标 ico要求256*256
			},
			productName: "ILTestClient", // 应用名称
       		asar: false //打包时不进行加密
		}
	}
}

可以在此目录\win-unpacked\resources\app查看打包后的文件和dist相同；

添加完electron-builder后 package.json文件会自动添加相关命令，如下图

在控制台执行npm run electron:build命令，打包exe（双击win-unpacked下的xxx.exe访问程序）。

要在exe程序中增加浏览器的ctrl f 功能

第一步
在background.js中注册ctrl f 事件，并在各个窗口中监听，直接上代码：
（遇到的问题：一开始百度的时候搜到的都是设置nodeIntegration为true后在Vue组件引入Electron就可以在Vue页面中监听到electron的事件，但是项目就不能在浏览器访问可能是因为浏览器没有node的运行环境，后面又查了一下可以通过preload.js进行预加载这样浏览器就可以正常访问了）

'use strict'

import {
   
    app, protocol, BrowserWindow, Menu, globalShortcut } from 'electron'
const path = require('path')
import {
   
    createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, {
   
    VUEJS_DEVTOOLS } from 'electron-devtools-installer'
let win;
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.