环境要求nodejs要求在16+
一、使用vite构建项目
npm create vite@latest
二、下载Electron
由于国内下载Electron 是无法下载，要么报错，要么就是卡住不动
解决办法如下 将Electron设置国内镜像后，可以加快文件的下载速度，下面是 electron的国内镜像设置
npm install electron -D
先清一下缓存：npm cache clean --force
设置一下镜像源：npm config set registry https://registry.npmmirror.com
设置electron镜像：npm config set electron_mirror https://registry.npmmirror.com/mirrors/electron/
验证是否安装成功
npx electron -v
三、配置
1.首先在根目录新建 electron / index.js（src同级）
import { app, BrowserWindow } from 'electron';
import { join } from 'path'
const createdWindow = () => {
const win = new BrowserWindow({
width:900,
height:600,
webPreferences: {
nodeIntegration: true,
contextIsolation:false,
}
})
if(process.env.NODE_ENV !='development'){
win.loadFile(join(__dirname,'../dist/index.html'))
}else {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
}
}
app.whenReady().then(createdWindow)
2.配置vite-plugin-electron插件需要进行打包编译的文件入口
electron-builder为打包桌面应用时所需要插件
npm install vite-plugin-electron -D // 打包编译文件入口
npm install electron-builder -D // 打包客户端
npm install vite-plugin-electron-renderer -D //渲染客户端
3.新增文件配置vite.config.electron.js引入执行配置
将入口文件写入，就是我们刚刚新建的主线程文件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'
export default defineConfig({
plugins: [
vue(),
vueJsx(),
electron([
{
entry:"electron/index.js"
}
]
),renderer()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
四、配置package.json
1.增加同级代码
解释：
"main": "dist-electron/index.js", // 为客户端打包后的路径
// 运行本地文件到浏览器
"dev": "vite",
// 本地打包
"build": "vite build",
// 运行客户端到本地
"dev-client": "vite --config vite.config.electron.js",
// 客户端打包-输出文件夹为 release/
"build-client": "vite build --config vite.config.electron.js && electron-builder",
"main": "dist-electron/index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"dev-client": "vite --config vite.config.electron.js",
"build-client": "vite build --config vite.config.electron.js && electron-builder",
"preview": "vite preview"
},
"build": {
"appId": "com.my-website.my-app",
"productName": "MyApp",
"copyright": "Copyright © 2021 kuari",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"dist-electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "release/"
}
}
结尾
打包过程中可能会报错：
解决方案参考zhuanlan.zhihu.com/p/483976136
electron打包时根据dist文件进行打包所以需要先生成dist文件后在打客户端的包
A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.连接尝试失败，因为被连接方在一段时间后没有正确响应，或者建立的连接失败，因为连接的主机没有响应。
原因：缺少包
存放目录：
macOS: ~/Library/Caches/electron
Linux: ~/.cache/electron
windows: %LOCALAPPDATA%\electron\cache
