简介
由于之前创建electron项目时都是使用vue add electron-builder来让vue集成electron的，但是最高只支持到electron13.0，对于想要继承electron高版本的项目则不太支持，因此本文将介绍如何在vue项目中集成高版本electron
搭建环境
整体环境与如何创建electron-vue项目 中基本一致
步骤
使用vue-cli创建项目
与如何创建electron-vue项目 中使用vue-cli创建项目一致。
安装electron组件
cnpm install electron -D
cnpm install electron-builder -D
electron必须文件：
main.js:
主程序，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)。需要在package.json中指定main的位置，示例如下:
main.js的路径是相对于packages.json的路径，我这便是同级目录。
const { app, BrowserWindow } = require('electron');
const path = require('path');
const winURL = path.join(__dirname, 'index.html')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile(winURL);
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
index.html
用于electron加载vue打包后的index.html,和main.js中的win.loadFile('index.html')对应,需要注意路径，此处我放置在与main.js同级目录。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<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>
标签：vue,const,process,js,electron,桌面,data,客户端
From： https://www.cnblogs.com/xy-bot/p/17248244.html