Electron和vue3集成（推荐仅用于开发）

news2024/11/26 13:49:02

本篇我们仅实现Electron和vue3通过先运行起vue3项目，再将vue3的url地址交由Electron打开的方案，仅由Electron在vue3项目上套一层壳来达到脱离本机浏览器运行目的

1、参考快速上手 | Vue.js搭建起vue3初始项目

npm install -g vue
npm install -g @vue/cli-service
npm create vue@latest

Project name: 项目名称
以下选项我选了Yes
Add TypeScript
Add JSX Support
Add Vue Router for Single Page Application development
Add Pinia for state management

cd 项目目录

2、参考快速入门 | Electron，在vue项目里添加Electron

npm install -g electron
npm install -g @electron-forge/cli
npx electron-forge import

在项目目录下执行npm init，按Electron的要求修改一下package.json

npm init

package name: 项目名称
version: 版本
entry point: 改为main.js
author: 程序作者

3、项目根目录下编辑一个Electron的入口文件main.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  //win.loadFile('index.html')
  win.loadURL('http://127.0.0.1:5173/') //载入vue访问地址

  win.maximize() //窗口最大化
  win.setMenu(null) //清除顶部菜单
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

4、项目根目录下编辑一个preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

5、为了使vue和electron正常运行，需要先运行vue，使得其url可以正常访问，然后再开启electron去加载url

此处需要安装两个库：

concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
wait-on：等待资源，此处用来等待url可访问

npm install -S concurrently wait-on

接着修改package.json，scripts里修改dev命令，vite后添加host、port参数指定主机名和端口；新增两条命令，其中tcp:127.0.0.1:5173指定监听的端口，就是前面vue运行的端口

"scripts": {
    "dev": "vite --host 127.0.0.1 --port 5173",
    "electron": "wait-on tcp:127.0.0.1:5173 && npm run start",
    "serve": "concurrently -k \"npm run dev\" \"npm run electron\""
},

6、现在来运行整个项目