Electron和vue3集成（推荐仅用于开发）-编程知识

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

本篇我们仅实现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@latestProject name: 项目名称
以下选项我选了Yes
Add TypeScript
Add JSX Support
Add Vue Router for Single Page Application development
Add Pinia for state managementcd 项目目录

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

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

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

npm initpackage 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、现在来运行整个项目