Electron和Vite结合的一些思考

refineiks

已于 2024-03-02 14:01:37 修改

阅读量2k

点赞数 2

文章标签： electron

于 2023-10-25 18:23:27 首次发布

本文链接：https://blog.csdn.net/2301_79959413/article/details/134029388

版权

web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Electron项目中集成Vite，包括创建Vite工程、配置Electron启动入口，以及处理开发环境和生产环境的差异。同时提到了Vite中使用Node.js的局限性。作者最后推荐了另一种更完整的开发方式，即分离Electron组件和Vue库的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

Electron和Vite都有各自的应用场景。单独运行Electron或者Vite工程是非常容易的，官方文档有详细的教程。但是把两者结合起来有一些要注意的地方。本文通过搭建一个Electron + Vite的示例应用来说明两者结合的方式及存在的问题。

1、启动Vite

用Vite脚手架创建一个工程，指定工程名称，其余保持默认即可。

npm create vue@latest

命令行安装Vite

进入工程文件夹，安装依赖

npm install

执行启动命令

npm run dev

命令行启动Vite

通过链接可访问Vite工程，可以看到这是一个传统的Web前端页面。

Vite启动页面

2、启动Electron

npm install --save-dev electron

这里electron作为开发依赖就可以，为什么生产环境不需要，官方给出了解释

要运行electron工程，必须在package.json中指定入口点文件（main），此外为了方便增加一条启动electron工程的命令

Electron配置

此时已存在src/main.js，但这是Vite的main.js

Vite的main.js

在根目录下创建electron的main.js

    const { app, BrowserWindow } = require('electron')

    const createWindow = () => {
      const win = new BrowserWindow({
        width: 800,
        height: 600
      })

      win.loadFile('index-electron.html')
    }

    app.whenReady().then(() => {
      createWindow()
    })

Electron的main.js

创建electron窗口加载的网页，由于vite已经有了一个index.html，electron的html我们叫它index-electron.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <meta
          http-equiv="Content-Security-Policy"
          content="default-src 'self'; script-src 'self'"
        />
        <meta
          http-equiv="X-Content-Security-Policy"
          content="default-src 'self'; script-src 'self'"
        />
        <title>Hello from Electron renderer!</title>
      </head>
      <body>
        <h1>Hello from Electron renderer!</h1>
        <p>👋</p>
      </body>
    </html>

Electron加载的html页面

执行以下命令启动Electron桌面端应用程序

npm run start:electron

Electron桌面应用

3、Electron + Vite

Vite启动拿到的是一个url，正好electron有加载URL地址的api。这样Electron就可以通过Vite工程的地址将Vite包含进来。

Electron加载URL的API

对main.js做如下修改

Electron加载Vite发布的URL

启动两个命令行窗口，一个启动vite，另一个启动electron，可以看到electron成功加载了vite的网页

Vite加载到Electron的效果

启动两个命令行窗口毕竟麻烦，这里可以安装npm-run-all三方库来并行执行

npm install npm-run-all --save-dev

在package.json里加入并行执行的命令，需要时执行即可

"dev:all": "npm-run-all -p dev start:electron"

并行启动Electron和Vite

开发环境下可以这么用，生产环境下需要调整。在执行npm run build之后会生成一个dist文件夹，生产环境下调用该文件夹的网页内容

npm run build

生产环境Vite的dist文件夹

因此，为了兼顾生产环境需要在main.js中做如下修改

Electron中区分开发环境和生产环境

main.js最终代码文本如下

    const { app, BrowserWindow } = require('electron')

    const isDev = app.isPackaged !== 'true';

    const createWindow = () => {
      const win = new BrowserWindow({
        width: 800,
        height: 600
      })

      // win.loadURL('http://localhost:5173/')

      if (isDev) {
        win.loadURL('http://localhost:5173/');
      } else {
        win.loadFile(path.join(__dirname, 'dist', 'index.html'));
      }
    }

    app.whenReady().then(() => {
      createWindow()
    })

Electron的main.js文件

执行npm run dev:all可以看到结合的效果