2023年6月29日发(作者：)

vue项⽬使⽤electron开发过程记录1、⾸先全局安装安装包，也可以使⽤过程中单独安装npm install -g electronnpm install -g electron-packager2、vue项⽬配置,需要使⽤相对路径 3、vue项⽬确认路由⽂件，删除mode 4、在vue项⽬下新建electron⽬录，⽬录结构如下5、electron⽬录结构如下6、electron下的⽂件内容⽂件内容如下const { app, BrowserWindow } = require("electron");const path = require('path');const fs = require("fs");function reloadTheWin(win) { ("./dist", event => { if (event == "change") { ('updating') (); } });}function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, icon: (__dirname, './dist/'), webPreferences: { nodeIntegration: true, preload: (__dirname, '') } }); const env = _ENV if( env== 'development'){ //开发环境 do something (env) ('kaifa') L('localhost:8080/#/') }else{ //⽣产环境 do something (env) ('shengchan') le(__dirname + "/dist/"); } reloadTheWin(win);}ady().then(createWindow);("window-all-closed", () => { if (rm !== "darwin") { (); }});("activate", () => { if (Windows().length === 0) { createWindow(); }}); ⽂件内容如下{ "name": "electron-app", "version": "1.0.0", "description": "", "main": "", "scripts": { "test": "echo "Error: no test specified" && exit 1", "serve": "set NODE_ENV=development&&electron . --mode=development", "serve-prod": "set NODE_ENV=production&&electron . --mode=production", "build": "electron-packager .", "package-win-my": "electron-packager ./ AppName --overwrite --platform=win32 --asar --out=OutputFolderName --prune=true" }, "electronPackagerConfig": { "packageManager": "npm", "icon": "/dist/" }, "extraResources": [ { "filter": [ "static/*" ] } ], "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "electron": "^14.0.0" }}⽂件内容如下// // All of the APIs are available in the preload process.// 它拥有与Chrome扩展⼀样的沙盒。ntListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = mentById(selector) if (element) ext = text } for (const dependency of ['chrome', 'node', 'electron']) { replaceText(`${dependency}-version`, ns[dependency]) }})7、开发过程中各个⽤到的⼩功能，细节操作（1）在主进程配置后渲染进程可以使⽤node的API，使得浏览器的js可以⽀持node接⼝ （2）fs写⽂件(3)把⼀个⽂件拖动到界⾯，获得⽂件的信息，进⾏加载html写法js的写法 （4）webview的使⽤，可以使⽤这个功能做爬⾍html在主进程设置⽀持webview标签的配置页⾯效果 监听webview的加载情况 在webview⾥⾯执⾏js，⾃动化的操作代码 （5）主进程和渲染进程的通信--1主进程监听渲染进程发过来的事件，并进⾏答复渲染进程主动发送消息给主进程--2主动的发消息给渲染进程渲染进程监听 解决乱码问题，配置UTF-8编码，先配置编码，再正常启动 （6）dialog窗⼝的配置 （7）⽤户关闭窗⼝之前给出⽤户提⽰ （8）原⽣⾃带⽹络请求的库 （9）electron-vue的环境搭建（10）项⽬的基本结构和使⽤打开浏览器 （11）使⽤ant ui框架，参考官⽹（12）实现查找书籍功能 配置跨域问题，在主进程进⾏设置（13）获取下载链接,需要使⽤后端的axios才能使⽤流的形式进⾏下载使⽤后端的axios,进⼊node_modules，找到axios，将axios/lib/adapters的的内容复制到 （14）fs读取⽂件列表 （15）展epub的数据九、electron + vuenpm install -g electron