把 web 项目改成 Electron 项目

最新推荐文章于 2025-03-28 11:31:09 发布

A_lost_sheep

最新推荐文章于 2025-03-28 11:31:09 发布

阅读量1k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/wwwmewww/article/details/104264368

版权

Web前端专栏收录该内容

14 篇文章

订阅专栏

文章目录

把 web 项目改成 Electron 项目
打包

把 web 项目改成 Electron 项目

返回目录

安装 Electron
```
npm i -D electron@latest
```

修改 webpack.config.js

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

package.json

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

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 导入。