前言

因为习惯用vue进行前端开发，外加vue的UI库用起来比较方便一点。

故本文介绍如何在Electron中使用vue进行开发。

会装vue和Electron的可以直接跳到三。

一、安装vue

js 复制代码

npm create vue@latest

注意：如果提示不成功，可能是node版本太低的原因。我用的是18.16.0

根据提示一步步来

js 复制代码

cd .\目录名\
npm install
npm run dev

得到一个vue页面： http://localhost:5173/

二、安装Electron

新建一个 electron-base 文件夹

js 复制代码

cd electron-base

生成 package.json 文件

js 复制代码

npm init

npm导入electron (导入时间有点慢，可以换国内源) 参考官网

js 复制代码

npm install electron --save-dev

修改 package.json 配置文件

新建主线程文件main.js,并贴入代码（具体可参考上篇文章）

js 复制代码

// app 模块，它控制应用程序的事件生命周期。
// BrowserWindow 模块，它创建和管理应用程序 窗口。
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
const createWindow = () => {
  // 创建一个浏览器窗口对象
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 窗口对象对应的html文件
  win.loadFile('./pages/index.html')
  // win.loadURL('http://localhost:5173/')
}

// app模块准备完成，创建窗口
app.whenReady().then(() => {
  ipcMain.handle('__dirname', () => __dirname)
  createWindow()
})

新建预加载线程preload.js并写入代码

js 复制代码

const { contextBridge, ipcRenderer }  = require('electron')
contextBridge.exposeInMainWorld('versions', {
  getVersions: (name) => {
    return process.versions[name]
  },
})

contextBridge.exposeInMainWorld('jinlin', {
  pika: '皮卡丘'
});

contextBridge.exposeInMainWorld('sex', '男');

contextBridge.exposeInMainWorld('dirname', ipcRenderer.invoke('__dirname'))

新建html文件并写入代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello world!</h1>
  <h2></h2>
  <script>
    const h2 = document.querySelector('h2')
    window.dirname.then(res => {
      console.log('res', res)
      // 因为在预加载脚本preload.js中暴露了全局变量 varName，所以在html中可以直接访问到其中的node.js的内容
      h2.innerText = 
      `
      该应用的Chrome版本为${versions.getVersions('chrome')},
      Node.js的版本为${versions.getVersions('node')}
      Electron版本为${versions.getVersions('electron')}
      我的精灵是:${jinlin.pika}
      我的性别是:${sex}
      文件路径是:${res}
      `
    })
  </script>
  <!-- 通常专门弄一个renderer.js文件来写html中运用到的js内容，称之为渲染脚本 -->
  <!-- <script src="./renderer.js">

  </script> -->
</body>
</html>

启动electron

js 复制代码

npm run start

3. 将vue和Electron结合使用

在前面使用Electron都是直接加载一个html页面，Electron窗口还提供了一个加载URL的方法，我们只需要在主线程中加载vue启动项目的动态URL就可以在vue中使用Electron的属性和方法。

注意：确保vue项目是启动着的，然后新开命令行窗口运行Electron。

3.1 在vue中使用Electron提供的预加载线程变量

先把HomeView文件中多余部分全部删除

注意：在vue中的template模板不能直接调用window变量（vue设计如此）。

3.2 动态启动Electron

当前在vue中更改代码后，页面内容都会动态改变。但是在Electron中修改代码必须关掉再启动。

可以安装nodemon实现Electron动态启动。

js 复制代码

npm i nodemon -D

修改package.json的start命令

js 复制代码

"start": "nodemon --exec electron . --watch ./ --ext .js,.html"

此时修改Electron中的内容就会自动重启了。

3.3 打包

打包就是两个项目分别打包。

如果要将vue项目部署上线，就直接改为部署后的URL再执行Electron打包。
如果只想本地打包，就将vue打包后的dist文件夹复制到Electron文件夹中，再读取html文件，最后打包。

在此我详细介绍第二种本地打包方式。

1. vue打包

修改vite.config.js，新增base路径

arduino 复制代码

npm run build

2. Eletron打包

将上面得到的dist文件夹粘贴过来

修改主线程文件路径

执行打包命令(具体可看上篇文章)

java 复制代码

npm install --save-dev @electron-forge/cli 
npx electron-forge import
npm install --save-dev @electron-forge/plugin-fuses
npm run make

总结

本质就是用vue写前端页面，然后用Electron套壳，通过window传递消息，实现前端和node之间的通信。

Electron学习记录（二）-在Electron中使用vue3

前言

一、安装vue

二、安装Electron

3. 将vue和Electron结合使用

3.1 在vue中使用Electron提供的预加载线程变量

3.2 动态启动Electron

3.3 打包

1. vue打包

2. Eletron打包

总结