把 web 项目 改成 Electron 项目

返回目录

1. 安装 Electron

   npm i -D electron@latest
   

2. 修改 webpack.config.js

   //...
   module.exports = {
     target: "electron-renderer", //改成用 electron 渲染
     //...省略
     devServer: {
       // open: 'Google Chrome', //设置不启动浏览器
     }
   }
   

3. package.json

   {
     //...省略
     "homepage": ".", //设置资源相对路径
     "scripts": {
       "start": "cross-env NODE_ENV=development webpack-dev-server", //启动 web 项目
       "exe": "cross-env NODE_ENV=development electron ." //运行 electron
     },
     //...省略
   }
   

4. main.js

   const { app, BrowserWindow } = require('electron')
   const path = require('path');
   const url = require('url');
   
   function createWindow() {
     // 创建浏览器窗口
     let win = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true
       }
     })
   
     const startUrl = process.env.NODE_ENV === 'development'
       ? 'http://localhost:3000'
       : path.join(__dirname, "/build/index.html");
   
     win.loadURL(startUrl)
     // 加载 index.html 文件
     // win.loadFile('./dist/index.html')
   
     // 打开开发者工具
     win.webContents.openDevTools()
   }
   
   // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
   // 部分 API 在 ready 事件触发后才能使用。
   app.whenReady().then(createWindow)
   
   //当所有窗口都被关闭后退出
   app.on('window-all-closed', () => {
     // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
     // 否则绝大部分应用及其菜单栏会保持激活。
     if (process.platform !== 'darwin') {
       app.quit()
     }
   })
   
   app.on('activate', () => {
     // 在macOS上，当单击dock图标并且没有其他窗口打开时，
     // 通常在应用程序中重新创建一个窗口。
     if (BrowserWindow.getAllWindows().length === 0) {
       createWindow()
     }
   })
   
   // 您可以把应用程序其他的流程写在在此文件中
   // 代码 也可以拆分成几个文件，然后用 require 导入。
   

5. 在一个终端中运行 npm start来启动 web 服务，
   在另一个终端中执行 npm run exe来启动 Electron。

打包

1. 安装 electron-builder

   npm i -D electron-builder
   

2. 配置 package.json