前言本文介绍一种使用vue-cli-plugin-electron-builder（名字太长，以下简称builder）将已有的Vue单页项目迁移到Electron的方法。下面将以大名鼎鼎的VueElementAdmin为例，详细介绍如何将其变成双端项目。选型说到Vue到Electron的迁移，网上很多资料都介绍了electron-vue的使用方法，但是经过比较和实践，我还是选择使用builder，原因如下：builder的更新维护更及时，而且问题更少。接下来electron-vue的更新基本停滞，问题比较多。electron-vue使用的electron版本很老，builder使用的electron跟不上官方的步伐。electron-vue使用2.0.4electron:builder'selectron现在11.2.1版本：electron-vue是一套基于vue-cli2的项目模板，builder是基于vue-cli3的脚手架插件项目。实践也证明这个选择是明智的^_^迁移步骤进入正题首先，当然是找到你的Vue项目，本文以VueElementAdmin为例，OK，我们先下载这个项目：gitclonehttps://github.com/PanJiaChen/vue-element-admin.git第二步，安装依赖：cdvue-element-adminnpmi运行看看：npmrundev经过前两步，我们就有了一个很棒的Vue项目：第三步，安装electron项目需要的依赖：不多，基本4个一个：npmi-Delectron@^9.0.0npmi-Delectron-devtools-installer@^3.1.0npmi-Delectron-icon-builder@^2.0.1npmi-Dvue-cli-plugin-electron-builder@~2.0.0-rc.5在安装依赖时，可能会遇到两类问题：electron安装很慢，甚至证书错误无法安装。第一类问题可以通过设置镜像来解决：npmconfigsetregistryhttps://registry.npm.taobao.org/npmsetelectron_mirrorhttps://npm.taobao.org/mirrors/electron/npmsetELECTRON_MIRRORhttps://cdn.npm.taobao.org/dist/electron/证书错误比较常见于公司安装时发生，而公司公司使用的代理可以通过以下方法解决：npmconfigsetstrict-sslfalse//注意，将https改为http：npmconfigsetregistryhttp://registry.npm.taobao.org/npmsetelectron_mirrorhttp://npm.taobao.org/mirrors/electron/npmsetELECTRON_MIRRORhttp://cdn.npm.taobao.org/dist/electron/第四步，如果使用vue-cli，则划分主进程和渲染进程-plugin-electron-builder创建项目，默认将主进程的源文件设置为background.js，并与渲染进程的文件放在src目录下。目录：主要和渲染器。main放置与主进程相关的代码，renderer放置与渲染进程相关的代码。electron-vue做同样的事情。OK，我们在src下也分出两个目录：main和renderer，然后将src下的所有模块都放到renderer中。在main中创建index.js(主程序代码)，填写如下代码：import{app,protocol,BrowserWindow}from'electron'import{createProtocol}from'vue-cli-plugin-electron-builder/lib'importinstallExtension,{VUEJS_DEVTOOLS}from'electron-devtools-installer'constisDevelopment=process.env.NODE_ENV!=='production'//Scheme必须在应用准备好之前注册protocol.registerSchemesAsPrivileged([{scheme:'app',privileges:{secure:true,standard:true}}])asyncfunctioncreateWindow(){//创建浏览器窗口。constwin=newBrowserWindow({width:800,height:600,webPreferences:{<%if(spectronSupport){%>//Spectron测试需要enableRemoteModule:true,<%}%>//使用pluginOptions.nodeIntegration，离开仅此一个//请参阅nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration了解更多信息nodeIntegration:process.env.ELECTRON_NODE_INTEGRATION}})if(process.env.WEBPACK_DEV_SERVER_URL){//如果处于开发模式，则加载开发服务器的urlawaitwin.loadURL(process.env.WEBPACK_DEV_SERVER_URL)if(!process.env.IS_TEST)win.webContents.openDevTools()}else{createProtocol('app')//非开发时加载index.htmlwin.loadURL('app://./index.html')}}//关闭所有窗口后退出.app.on('window-all-closed',()=>{//在macOS上，应用程序及其菜单栏通常保持活动状态//直到用户使用Cmd+Q显式退出if(process.platform!=='darwin'){app.quit()}})app.on('activate',()=>{//在macOS上，当点击停靠栏图标时，通常会在应用程序中重新创建一个窗口并且没有其他窗口打开。if(BrowserWindow.getAllWindows().length===0)createWindow()})//当Electron完成//初始化并准备好创建浏览器窗口时，将调用此方法。//一些APIc仅在此事件发生后使用。app.on('ready',async()=>{if(isDevelopment&&!process.env.IS_TEST){//安装VueDevtoolstry{awaitinstallExtension(VUEJS_DEVTOOLS)}catch(e){console.error('VueDevtoolsfailedtoinstall:',e.toString())}}createWindow()})//在开发模式下根据父进程的请求干净退出.if(isDevelopment){if(process.platform==='win32'){process.on('message',(data)=>{if(data==='graceful-exit'){app.quit()}})}else{process.on('SIGTERM',()=>{app.quit()})}}第五步，配置vue.config.js：注意configureWebpack中的pluginOptions.electronBuilder.mainProcessFile和config.entry.app，配置细节可见:builder和cli，还要特别注意svg的处理module.exports={pluginOptions:{electronBuilder:{mainProcessFile:'src/main/index.js',builderOptions:{appId:"catpoint.com",productName:"Catpoint",icon:"./public/icons/icon.ico",文件:["**/*","static/*"],asar:true,mac:{图标:"./public/icon.png",目标:["zip","dmg"],category:"com.catpoint-category.utilities"},win:{icon:"./public/icons/icon.ico",target:["zip","nsis"]},nsis:{oneClick:false，allowElevation：true，allowToChangeInstallationDirectory：true，installerIcon：“./public/icons/icon.ico”，uninstallerIcon：“./public/icons/icon.ico”，installerHeaderIcon：“./public/icons/icon.ico",createDesktopShortcut:true,createStartMenuShortcut:true,license:"./LICENSE.txt"}}}},...配置ureWebpack:config=>{config.entry.app='./src/renderer/main.js'return{name:name,resolve:{alias:{'@':resolve('src/renderer')}}}},...chainWebpack(config){config.module.rule('svg').exclude.add(resolve('src/renderer/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/renderer/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId:'icon-[name]'}).end()}}第六步，配置脚本指令："scripts":{"dev:desktop":"npmruncopy&&vue-cli-serviceelectron:serve--modedev","dev:web":"vue-cli-serviceserve","build:desktop":"npmrunbuild:icon&&npmrunbuild:mac&&npmrunbuild:win","build:win":"vue-cli-serviceelectron:build--legacy--windows--x64","build:mac":"vue-cli-serviceelectron:build--legacy--macos","build:icon":"electron-icon-builder--input=./public/icon.png--output=public--flatten","build:web":"vue-cli-servicebuild",...},好了，迁移到这里就完成了，支持双端调试打包，顺利的话，半个小时就准备好了，运行npmrundev:desktop和npmrundev:web看看效果，你也可以看看这个：ProtonAdmin，一个在VueElementAdmin基础上重建的Electron项目，正在不断完善和增强中。
