本篇我们仅实现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 项目目录添加vue3的端口配置，可以指定其他端口
vite.config.ts
defineConfig里添加一个配置
{
server:{
host:'0.0.0.0',
port: 5173,
https: false,
},
}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里新增两条命令，其中tcp:5173指定监听的端口，就是前面vue运行的端口
"scripts": {
"electron": "wait-on tcp:5173 && npm run start",
"serve": "concurrently -k \"npm run dev\" \"npm run electron\""
},6、现在来运行整个项目
npm run serve界面出现了，ok
