参考文章
手把手教你如何新建一个vue3+electron项目_搭建一个vue3+electron的项目-CSDN博客
安装 | electron-egg (kaka996.com)
其中遇到问题，特记录如下。
ES6模式报错
App threw an error during load
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'D:\vs2024proj\electron_vite_ts_demo_sunny\electron-vite-demo-sunny\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ES6模式下不能使用require。解决办法更改package.json，删除 "type": "module".
引入main.js后报错
ES6模式下不能使用require。解决办法更改package.json，删除 "type": "module".
引入electon
屏蔽告警信息
参考 Electron Security Warning (Insecure Content-Security-Policy) 告警解决-CSDN博客
使用了方法一和方法二。
方式一：index.html文件里设置安全策略
在HTML主文件的头部引入安全策略的设置，采用如下设置，Electron的控制台就不会显示告警了：
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
方式二：main.js文件里屏蔽安全告警
在Electron工程启动文件main.js的头部设置以下内容，也可以屏蔽安全告警在console控制台的显示：
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
至此第二步完成。
三、加入electron预加载脚本,并通过其进行electron和vue的交互
通讯
主进程与渲染进程通讯
/preload/index.js文件代码如下：
-------------------------------
const { contextBridge, ipcRenderer } = require('electron')
const handleSend = async (vue_params) => {
let fallback = await ipcRenderer.invoke('sent-event', vue_params)
return fallback
}
// 暴漏函数，能暴露的不仅仅是函数，我们还可以暴露变量
contextBridge.exposeInMainWorld('myApi', {
handleSend: handleSend,
setTitle: (title) => ipcRenderer.send('set-title', title) ,
openFile: () => ipcRenderer.invoke('dialog:openFile')
})
-----------------------------------
主进程main.js源码
-------------------------
const { app, BrowserWindow,ipcMain,dialog } = require('electron')
const path = require('path');
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'; //屏蔽安全告警
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, './preload/index.js')
}
})
// win.loadFile('index.html')
// 下面的url为自己启动vite项目的url。
win.loadURL('http://127.0.0.1:5173/')
// 打开electron的开发者工具
win.webContents.openDevTools({ mode: 'detach' })
}
ipcMain.handle('sent-event', (event,params) => {
console.log(params)
return '1111'
})
// 渲染进程中更改标题
const handleSetTitle = (event, title) => {
const webContents = event.sender
const win = BrowserWindow.fromWebContents(webContents)
win.setTitle(title)
}
ipcMain.on('set-title', handleSetTitle)
//打开文件
async function handleFileOpen() {
const { canceled, filePaths } = await dialog.showOpenDialog()
if (canceled) {
return
} else {
return filePaths[0] // 返回文件名给渲染进程
}
}
ipcMain.handle('dialog:openFile', handleFileOpen)
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
------------------------
vue中调用方法
----------------------------------
<template>
<div class="ipc-test-view">
<button @click="onSendTile">进程通讯测试</button>
<button @click="onOpenFile">打开文件</button>
<div>{{fileName}}</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const fileName=ref('')
const onSendTile = ()=>{
const title ='11111'
window.myApi?.setTitle(title)
}
async function onOpenFile () {
const filePath = await window.myApi?.openFile()
console.log(filePath);
fileName.value = filePath;
}
</script>
<style scoped>
.ipc-test-view{
border:solid 1px pink;
width: 300px;
height: 300px;;
}
</style>
--------------------------------------
四、优化开发体验
1. 安装nodemon依赖
2. 更改启动配置，在package.json中的scripts添加这句进行启动electron项目，nodemon在检测到有以.js,.html结尾文件发生变动时，就会重启窗口。
"start": "nodemon --exec electron . --watch ./ --ext .js,.html"
热启动测试
五 vite + vue3 + Antd 搭建后台管理系统
npm install ant-design-vue --save
更改 /src/main.ts
-------------------------------------
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import Antd from "ant-design-vue";
import 'ant-design-vue/dist/antd.css';
const app = createApp(App)
app.use(Antd)
app.use(createPinia())
app.use(router)
app.mount('#app')
------------------------------------------
七、自定义窗口（不使用原生的窗口）
八、项目打包
--------------------------------------------------
"build": {
"appId": "com.zm666.desktop",//包名
"productName": "electron测试", //项目名 这也是生成的exe文件的前缀名
"asar": true,
"copyright": "Copyright © 2023 electron",//版权 信息
"publish": {
"provider": "generic",// 服务器提供商 也可以是GitHub等等
"url": ""// 服务器地址
},
"directories": { // 输出文件夹
"output": "electron-build/"
},
"extraResources": [
{
"from": "./public",
"to": "./public"
}
],
"files": [ // 打包的electron需要包含的文件,一般就是与electron的有关的打包进去
"main.js", // electron主入口文件
"controller", // 也是主入口文件，只不过拆成了两个文件
"preload" //预加载文件
],
"mac": {
"artifactName": "${productName}_${version}.${ext}",
"target": [
"dmg"
]
},
"win": {
"icon": "public/logoTemplate.ico",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
],
"artifactName": "${productName}_${version}.${ext}"
},
"nsis": {
"oneClick": false,// 是否一键安装
"perMachine": false,
"allowToChangeInstallationDirectory": true,// 允许修改安装目录
"deleteAppDataOnUninstall": false,
"installerIcon": "public/favicon.ico",// 安装图标
"uninstallerIcon": "public/favicon.ico",// 创建桌面图标
"createDesktopShortcut": true,// 创建桌面图标
"createStartMenuShortcut": true,// 创建开始菜单图标
"shortcutName": "zm666测试平台" // 图标名称
},
"releaseInfo": {
"releaseNotes": "版本更新的具体内容"
}
}
------------------------------------------------------
• downloading url=https://registry.npmmirror.com/-/binary/electron/28.2.0/electron-v28.2.0-win32-ia32.zip
size=94 MB parts=8
• downloaded url=https://registry.npmmirror.com/-/binary/electron/28.2.0/electron-v28.2.0-win32-ia32.zip
duration=2.113s
第一次下载包报错了。
然后我使用这个网络连接https://registry.npmmirror.com/-/binary/electron/28.2.0/electron-v28.2.0-win32-ia32.zip下载了这个包，但是不知道往哪里放。
最后想到一个方法，打开优途加速器，连接快速通道，包就下载成功了。
本地路径
打包成功了。
打包成功
网友评论