也许你不愿意只写网页，被称为“他会写网页”，也许你有项目需求，必须写桌面应用，但是你只懂前端，无所谓。网上的教程很多，但是通俗易懂的很少。electron打包的应用我尽量解释清楚。希望大家在写自己的应用的时候能够感觉清楚。话不多说，进入正题：1.安装electron。为了以后方便，建议全局安装。以后可以在任何文件夹中使用Electron。如何安装就不废话了。我不会去官方网站。安装好electron之后，我还会安装一个专门的打包工具electron-packager，方便我们后面打包的时候使用。2.runbuild当你写完你的react项目后（其实是一半，四分之一随意写，只要页面上有内容即可），执行npmrunbuild，结构如下图会在build文件夹下生成：这时候你尝试点击index.html（不需要放在服务器的静态资源目录下）。如果你能看到内容，那就没问题。如果是黑屏，控制台也没有错误提示，那么只需要添加package.在json中添加一个"homepage":'./'，再次执行build，就可以看到内容了。如果你的index.html没有内容，不要继续，检查你的项目路径问题。3.创建入口文件和配置在前面的index.html可以正常显示的前提下，在你的项目build文件夹下创建如下2个文件main.jsconstelectron=require('electron');//控制应用lifecycleThemoduleconst{app}=electron;//创建本地浏览器窗口的模块const{BrowserWindow}=electron;//一个指向window对象的全局引用，如果没有这个引用，那么当javascript对象被垃圾回收时//窗口会自动关闭letwin;functioncreateWindow(){//创建一个新的浏览器窗口win=newBrowserWindow({width:1920,height:1080});//并加载应用程序的index.html页面win.loadURL(`file://${__dirname}/index.html`);//打开开发工具页面//win.webContents.openDevTools();//窗口关闭时调用的方法win.on('closed',()=>{//取消引用窗口对象，通常如果应用程序支持多个窗口，您会将窗口对象存储在一个数组中//和关闭窗口时应删除相应的元素.win=null;});}//当Electron完成初始化并创建浏览器窗口时将调用此方法。//有些API只能在这个事件发生后才能使用。app.on('ready',createWindow);/*varmainWindow=newBrowserWindow({webPreferences:{nodeIntegration:false}});*///当所有窗口关闭时退出应用程序app.on('window-all-closed',()=>{//对于OSX，应用程序和相应的菜单栏将保持活动状态，直到用户通过Cmd显式退出+Qif(process.platform!=='darwin'){app.quit();}});app.on('activate',()=>{//对于OSX，当单击停靠栏图标时，将重新创建一个应用程序窗口，并且不会打开其他//窗口if(win===null){创建窗口（）；}}）；//在此文件之后，您可以直接包含要由主进程运行的特定于应用程序的代码。//你也可以将这些代码放在另一个文件中，然后在此处导入。如果你想修改别人贴在这里的代码，就去学electron吧，这里只是简单介绍一下。package.json{"name":"crh_chat","version":"1.0-test","main":"main.js","author":{"name":"YOURNAME"},"license":"MIT"}做了这两件事，基本就ok了。4.打包在build文件夹中打开命令行electron-packager。crh-chat--win--out=release--arch=x64--version=1.0.0--electron-version=1.8.4--overwrite--icon=./favicon.ico这是我的。具体参数你得根据自己修改。下图中使用--out是生成文件夹的名称。里面有一堆dll。你可以在你的out文件夹中看到可执行程序，点击它，就可以运行成功了。结束了。react构建文件可以在非服务器环境中运行，非常方便。多说一句，如果你的react项目的index页面无法显示，可能是你使用了react-router的BroswerHistory，可以换成HashHistory。如果VUE项目出不来，很可能是使用了history路由方式，可以改成hash路由方式。
