vue3+electron开发桌面应用
创建项目
创建vue项目
首先创建一个vue项目，
vue create detect
完成配置选择后，会生成一个detect文件夹。
进入文件夹，尝试
npm run serve
看到服务正常开启，说明成功创建vue项目。
安装electron
执行命令
npm i electron -D
定义入口文件
因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。要以electron的main.js为入口。
在主目录下新建electron文件夹存放electron的文件。
然后在package.json配置入口：
"main": "electron/main/main.js",
在scripts标签下配置electron的启动命令
"start": "electron ."
运行
electron中运行vue项目
main.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadURL('http://127.0.0.1:8080/')
// win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
win.loadURL('http://127.0.0.1:8080/')中的地址可以通过npm run serve看到。
然后运行
npm run serve
npm run start
就可以成功看到界面。
完善必备工具
热更新工具–nodemon
执行下载命令
npm i nodemon -D
重新更改scripts标签的启动命令，监控文件改变，代码如下：
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue",
这个参数的含义是：用nodemon启动electron，并监控js、html、css、vue等文件的变动。
打包
打包工具–electron-builder
执行下载命令
npm i electron-builder -D
配置electron-builder：
简单项目，不要搞那么多配置文件，就在vite提供的最外层package.json里面配置electron-builder就够用了。
先在scriptes标签里面增加命令：
"dist": "electron-builder"
打包
先运行vue项目：npm run serve，再打包electron：npm run dist，如果终端不报错，并且在项目的dist文件夹中出现文件，说明打包成功。
如果出现访问github报错，可以参考https://blog.csdn.net/bailong1/article/details/78657605。
打包配置
在package.json中增加配置：
"build": {
"productName": "electron-vue",
"appId": "electron-vue",
"asar": true,
"directories": {
"output": "release/${version}"
},
"files": [
"dist",
"electron"
],
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"mac": {
"category": "your.app.category.type"
},
"win": {
"icon": "./electron/log.ico",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
]
},
"linux": {}
},
这是打包的一个最基础的配置，简单讲解：
productName：项目名称，最终打出的包叫什么名，就是这里决定的
appId：软件的ID，现在不管做app、小程序都需要一个软件id，用来上架各平台。
asar：我们打包的路径“\win-unpacked\resources”文件下，有一个app文件夹，里面放着我们所有的源码，可以让每一个人看到，这显然并不太好，asar属性就是把这个app给打个包，让普通用户看不到里面的信息，类似个压缩包，但是很好破解，算是防君子不防小人吧！默认就是true，但我们研究打包方案的时候，需要把它设置成false来看看里面的文件结构。
directories：打包后的目标文件，默认是dist，这个建议更改。vue打包后的文件默认也是dist，两者冲突，所以把electron的打包目标文件设置为out。
files：electron-builder默认会打包项目里的所有文件，其实对我们有用的就两个方面，一个是vue打包编译后的文件，一个是electron的核心代码，所以我们只需要最终打包dist和electron两个文件夹。
nsis：软件安装包的交互行为，这个属性有点多，大家还是自行查询吧。
win.icon：打包后的软件图标，windows需要ico格式，当然放个png也能解析，建议按照规范配置。网上很多在线转ico格式的网站，30秒去转一个就行。这个图片大小有要求，目前是要求最小256*256，先更改大小，再转ico图片。
win.target.arch：建议设置ia32，适配windows大部分版本。
mac版本的没试，某些企业禁止苹果，你懂的。linux做过简单的尝试，在银河麒麟系统能跑通，确定这套技术栈适配国产化环境，忘了做笔记了……
在package.json文件的scripts文件添加：
"dista": "npm run build && electron-builder"
这样我们只需要使用dista一条命令就可以实现打包。
但我们发现，在不运行npm run serve命令时，我们打包出来的软件都是没有vue页面的。
这是因为在main.js中写入了一句win.loadURL('http://127.0.0.1:5173/')来引入vue项目的。现在vue项目也是打包后嵌入到electron中，自然也就没有这样的代理服务器地址了。
所以我们需要通过路径查找，找到正确的vue打包编译后的index.html地址。
项目打包后，查找app资源下的electron和dist，分别是electron打包后的资源和vue打包后的资源，分析main.js和index.html之间的相对路径。
更改main.js的代码为：
const { app, BrowserWindow } = require('electron')
const {join} = require("path");
process.env.DIST = join(__dirname, '../../')
const indexHtml = join(process.env.DIST, 'dist/index.html')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
let contents = win.webContents
contents.openDevTools()
// win.loadURL('http://127.0.0.1:5173/')
win.loadFile(indexHtml)
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
然后打包，body里面应该就能渲染vue的首页index.html了。但是渲染得到的index.html还是一个空页面，这是因为我们还需要对vue打包编译做一些配置。
具体可参考https://www.jb51.net/article/249163.htm
在vue.config.js中添加
module.exports = {
publicPath: './', // 根域上下文目录
outputDir: 'dist', // 构建输出目录，可不写
assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)，可不写
};
之后一切正常。
