公司内部有一款基于electronvue的桌面软件。前几天，开发这个客户端的负责人离职了，我成了临时的优化师。作为一个写vue但是第一次接触electron的人，花了几天时间浏览了electron的整体架构，electronvue官方文档，客户端代码。尽管如此，我在优化过程中还是遇到了很多麻烦。项目结束后，在此做一个总结。为了节省开发成本和开发时间，将使用现有的网页。但是由于业务的差异，经常需要对electron项目中已有的网页进行一些小的改动。这时候就需要在webview网页中注入部分js和css来支持这些小改动，以免影响网页之前的业务逻辑可以被当前项目的业务使用。(1)在webview网页中注入css在webviewdom-read阶段，通过insertCSS()mounted()注入新样式{constwebview=this.$refs.webviewwebview.addEventListener('dom-ready',(e)=>{this.mInsertCSS()})}mInsertCSS(){webview.insertCSS(`.customer-panel{display:relative;}`)},(1)在webview页面注入js官网：https://www.electronjs.org/docs/api/webview-tag通过preload属性注入js代码一个String，指定一个脚本，在其他脚本在访客页面运行之前加载。preload属性可以在webview中的所有脚本执行之前执行指定的脚本，脚本的URL协议必须是file:asar:之一，因为在访客页面中，它是通过“内部”requiremounted()加载的{constwebview=this.$refs.webviewletpreloadFileif(process.env.NODE_ENV==='production'){preloadFile=`file://${global.__static}/preload.js`}else{preloadFile='file://'+require('path').resolve('static/preload.js')}webview.setAttribute('preload',preloadFile)}preload环境可以使用NodeAPI，这是一个特殊的环境，可以使用NodeAPI并访问DOM和BOM。这样的环境可以让我们在导入的js代码中使用ipcRenderer&&ipcRenderer.sendToHost(paramsJSON)向electron渲染进程发送信息（具体操作见electron（一）——webview与其加载页面的通信，以及rendering之间的通信）进程通信，渲染进程与主进程通信https://segmentfault.com/a/11...)通过executeJavaScript()方法执行webview页面中的js代码，返回Promise
