初始化vite
npm init vite
- 创建项目名称
- 选择Vue
- 我这里选择的是js,你们可以自定义选择
- 根据以下代码依次执行
cd electron-demo // 进入项目
npm install // 安装依赖
npm run dev //启动
集成electron
- 安装electron
npm install electron -D
- 在根目录下新建一个electron文件夹,在文件夹里新建文件main,js
- 修改packge.json文件里的入口
"main":"electron/main.js"
- 在main.js里新增如下代码
// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// 创建浏览窗口
const mainWindow = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
// preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('index.html')
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件,然后用 require 导入。
- 安装nodemon
npm i nodemon -D
- 在packge.json文件里新增electron启动脚本
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
- 启动electron
npm start
如果启动包如下错误
删除掉packge.json里面的type就行,因为electron依赖的是node而不是es6
重新运行
npm start
出现如下窗口
把main.js里面的
改成
mainWindow.loadURL('http://127.0.0.1:5174') //后面的地址为你本地启动的地址
如下图就已经启动成功
- 设置窗口状态
npm i electron-win-state -D
修改main.js部分内容
const { app, BrowserWindow } = require('electron')
const path = require('path')
const winState = require('electron-win-state').default
const createWindow = () => {
const winState = new winState ({
defaultWidth: 1000,
defaultHeight: 800
})
// 创建浏览窗口
const mainWindow = new BrowserWindow({
// 自定义窗口状态
...winState.winOpions,
// 定义预加载的js
webPreferences: {
// preload: path.join(__dirname, 'preload.js')
}
})
- 定义预加载的js
在electron文件夹里新建preload.js文件,新增如下代码
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
- 在main.js里面引入
const { app, BrowserWindow } = require('electron')
const path = require('path')
const winState = require('electron-win-state').default
const createWindow = () => {
const winState = new winState ({
defaultWidth: 1000,
defaultHeight: 800
})
// 创建浏览窗口
const mainWindow = new BrowserWindow({
// 自定义窗口状态
...winState.winOpions,
// 定义预加载的js
webPreferences: {
preload: path.join(__dirname, './preload.js')
}
})
- 严格模式
如果打开控制台出现如下界面
在index.html文件里或者main.js里添加以下代码
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
此时vue3+vite+electron的基本搭建已将完成,希望对你有所帮助