本文参考 作者:Kuari zhuanlan.zhihu.com/p/421460116
关于踩坑补坑记录
见文章末尾 六
二. 创建一个Vite项目
1. 安装 vite
yarn create vite
复制代码
2. 创建项目
创建命令如下:
yarn create vite <your-vue-app-name> --template vue
复制代码
此处创建一个项目,名为kuari。
yarn create vite kuari --template vue
复制代码
3. 进入且运行
进入项目,在运行前需要先安装下依赖。
cd kuari
yarn install
yarn dev
复制代码
三. 配置Electron
1. 官方文档
在Electron官网的快速入门文档中,有官方给出的利用html、javascript、css来创建一个electron应用的案例,vite+electron的方案也借鉴其中。
2. 安装
首先安装electron至vite应用。目前electron的版本为^20.0.2
yarn add --dev electron
复制代码
3. 配置文件
1)vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 新增
// https://vitejs.dev/config/
export default defineConfig({
base: path.resolve(__dirname, './dist/'), // 新增
plugins: [vue()]
})
复制代码
2)main.js
创建一个新的文件main.js
,需要注意的是,该内容中index.html
的加载路径跟electron官网给的配置不同。
// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同,需要注意
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他
// 打开的窗口,那么程序会重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。
复制代码
3)preload.js
创建一个新的文件preload.js
。
// preload.js
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与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])
}
})
复制代码
4)package.json
为了确保能够运行相关electron的命令,需要修改package.json
文件。
首先需要去设置main
属性,electron默认会去在开始时寻找项目根目录下的index.js
文件,此处我们使用的是main.js
,所以需要去定义下。
// package.json
{
"name": "kuari",
"version": "0.0.0",
"main": "main.js", // 新增
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"electron": "^15.1.2",
"vite": "^2.6.4"
}
}
复制代码
最后我们需要新增electron的运行命令。
// package.json
{
"name": "kuari",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron:serve": "electron ." // 新增
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"electron": "^15.1.2",
"vite": "^2.6.4"
}
}
复制代码
5) 运行
直接在终端输入如下命令:
yarn electron:serve
复制代码
接着我们就可以看到我们桌面应用就出来咯!
五. 动态模块热重载
1. 思路
先说结论,可利用electron中的mainWindow.loadURL(<your-url>)
来实现。
对于动态模块热重载功能来说,无论是webpack还是vite,其都是将构建内容存入内存,因此我们无法使用mainWindow.loadFile('dist/index.html')
这样加载文件的方式。
但是,单纯地改变该配置也是不行的,需要使用vite将开发服务器运行起来,可以正常运行动态模块热重载,而electron直接加载其开发服务器可访问的url,即http://localhost:3000
。
2 . 编辑 main.js
将mainWindow.loadFile('dist/index.html')
更新为mainWindow.loadURL("http://localhost:3000")
,更新后的文件如下所示:
// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
// mainWindow.loadFile('dist/index.html') 将该行改为下面这一行,加载url
mainWindow.loadURL("http://localhost:3000")
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他
// 打开的窗口,那么程序会重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。
复制代码
3. 编辑vite.config.js
修改文件vite.config.js
的base
,修改后的文件如下所示:
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
base: "./", // 新增
plugins: [vue()]
})
复制代码
4. 同时开启vite和electron服
为了使vite和electron正常运行,需要先运行vite,使得其开发服务器的url可以正常访问,然后再开启electron去加载url。
此处需要安装两个库:
- concurrently:阻塞运行多个命令,
-k
参数用来清除其它已经存在或者挂掉的进程 - wait-on:等待资源,此处用来等待url可访问
首先来安装。
yarn add -D concurrently wait-on
复制代码
接着更新文件package.json
,scripts
新增两条命令:
"scripts": {
"electron": "wait-on tcp:3000 && electron .",
"electron:serve": "concurrently -k "yarn dev" "yarn electron""
},
复制代码
更新后完整内容如下:
{
"name": "kuari",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && electron .",
"electron:serve": "concurrently -k "npm run dev" "npm run electron""
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"concurrently": "^6.3.0",
"cross-env": "^7.0.3",
"electron": "^15.1.2",
"vite": "^2.6.4",
"wait-on": "^6.0.0"
}
}
复制代码
5. 运行
现已添加两条命令:
yarn electron
为等待tcp协议3000端口可访问,然后执行electronyarn electron:serve
为阻塞执行开发服务器运行和yarn electron
命令
运行项目只要执行命令yarn electron:serve
即可,当修改项目文件时,桌面应用也将自动更
五. 打包
1. 环境变量
此处使用环境变量NODE_ENV
来切换生产和开发环境,生产环境为NODE_ENV=production
,开发环境为NODE_ENV=development
,若有其它如release
等环境可在此基础上拓展。
2. 创建electron文件夹
在项目根目录下创建文件夹electron
,将main.js
和preload.js
文件移动进来。其结构如下所示:
├── electron
│ ├── main.js
│ └── preload.js
...
复制代码
若还是不太明白可以看看源码中文件结构。
3. 编辑electron/main.js
该文件主要是需要根据环境变量切换electron加载的内容,修改内容如下:
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
复制代码
修改后的完整内容如下:
// electron/main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
// mainWindow.loadFile('dist/index.html') 将该行改为下面这一行,加载url
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
// 打开开发工具
if (NODE_ENV === "development") {
mainWindow.webContents.openDevTools()
}
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他
// 打开的窗口,那么程序会重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。
复制代码
4. 编辑package.json
首先修改main
属性,将main: main.js
改为main: electron/main.js
。
{
"name": "kuari",
"version": "0.0.0",
"main": "electron/main.js",
// ...
}
复制代码
接着,编辑build
属性:
"build": {
"appId": "com.your-website.your-app",
"productName": "ElectronApp",
"copyright": "Copyright © 2021 <your-name>",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
复制代码
然后,更新scripts
属性。
此处需要先安装两个库:
- cross-env: 该库让开发者只需要注重环境变量的设置,而无需担心平台设置
- electron-builder: electron打包库
yarn add -D cross-env electron-builder
复制代码
更新后的scripts
如下:
{
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", // 此处需要设置环境变量以保证开发时加载url
"electron:serve": "concurrently -k "yarn dev" "yarn electron"",
"electron:build": "vite build && electron-builder" // 新增打包命令
}
复制代码
最后,更新后的package.json
完整内容如下:
{
"name": "kuari",
"version": "0.0.0",
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
"electron:serve": "concurrently -k "yarn dev" "yarn electron"",
"electron:build": "vite build && electron-builder"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"concurrently": "^6.3.0",
"cross-env": "^7.0.3",
"electron": "^15.1.2",
"electron-builder": "^22.13.1",
"vite": "^2.6.4",
"wait-on": "^6.0.0"
},
"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/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
}
复制代码
5. 打包
直接执行打包命令即可开始打包。
yarn electron:build
复制代码
打包完成之后,会多出两个文件夹dist
和dist_electron
,其文件结构如下:
├── dist
│ ├── assets
│ ├── favicon.ico
│ └── index.html
├── dist_electron
│ ├── MyApp-0.0.0-mac.zip
│ ├── MyApp-0.0.0-mac.zip.blockmap
│ ├── MyApp-0.0.0.dmg
│ ├── MyApp-0.0.0.dmg.blockmap
│ ├── builder-debug.yml
│ ├── builder-effective-config.yaml
│ └── mac
...
复制代码
至此,便完成了打包。
后面再来写写关于electron的优化,减少electron打包后应用的体积。(这玩意儿确实打包下来有点大呢/狗头)
六 踩坑补坑记录
1、package.json里的lib参数删除
2、项目目录不允许有中文,否则不能下载打包依赖,导致无法打包
3、每次打包软件前都可能缺失依赖包,需要手动在package.json文件里的dependencies填写依赖名称和版本
4、打包软件时不能出现本软件运行状态(CsszView),需要从任务管理器关闭,否则将会打包失败,(builder文件夹为打包结束后生成的程序)
5、打包出错请删除 builder 文件夹 (名字过长无法覆盖删除,需强行粉碎或压缩文件为zip并选择删除源文件)
6、打包加密忽略配置
"asarUnpack": [
"**/node_modules/iconv-lite/**/*",
"**/node_modules/ip/**/*",
"**/node_modules/ws/**/*",
"**/node_modules/koa/**/*",
"**/node_modules/koa-router/**/*",
"**/node_modules/koa-static/**/*",
"**/node_modules/path/**/*",
"**/web/**/*"
],
"extraResources": [
{
"from": "./web",
"to": "app.asar.unpacked/web"
}
],
复制代码
7、打包取消加密
"build": { "asar": false }
复制代码
8、打包文件添加配置
"build": {
"files": [
"web/**",
"main.js",
"preload.js",
"config.js"
]
}
复制代码
9、报错信息 was compiled against a different Node.js version using
node版本与electron版本不一致导致报错
//electron端查看版本
console.log("node:", process.versions.node)
console.log("electron:", process.versions.electron)
console.log("modules:", process.versions.modules)
复制代码
cnpm rebuild --runtime=electron --target=15.3.0 --disturl=https://atom.io/download/atom-shell --abi=98
复制代码
15.3.0是你的electron版本,98是modules
node 16.5.0 electron 15.3.0 modules 98(此版本程序解决成功)
10、@serialport串口通讯模块包找不到路径
electron不能引入相对路径,换成绝对路径写法
./node_modules/serialport/node_modules/@serialport/parser-delimiter
复制代码
11、串口数据间断配置
因为传递的数据是不间断的,需要拼接数据
第一种方法用前端防抖节流做,第二种是内置方法配置间断符 ‘/n’ 为换行符,实际需什么符得看传回数据共同点
//配置间断符
const parser = serialPort.pipe(new Delimiter({ delimiter: '.' }))
//串口设备传来的数据 是buffer对象,用toString转一下码
parser.on('data', function (data) {
console.log(data.toString());
})
复制代码
12、打包软件时出现的文件缺失
下载的文件如果需要其他版本,直接修改链接中的版本号即可!!!
cannot resolve https://npm.taobao.org/mirrors/electron/15.3.4/electron-v15.3.4-win32-x64.zip: status code 404
复制代码
-
打包时下载electron-v.xxxx.zip文件失败
解决办法:直接在淘宝的文件库下载对应版本和打包平台的文件,你也可以全局搜索 electron-v20.0.2-win32-x64.zip,看下对应的文件下载到哪里,哪里就是你应该拷文件的位置。
下载
完成后
放在C:\Users\Administrator\AppData\Local\electron\Cache
这个目录下 -
打包时下载winCodeSign-v.xxx.7z文件失败
下载完
解压
放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign
目录下 -
打包时下载nsis-v.xxx.7z文件失败
下载地址:github.com/electron-us…
下载
完解压放
到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis
-
打包时下载nsis-resources-v.xxx.7z文件失败
下载
完解压放
到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
13、Electron执行electron-builder打包命令报错
报错:Error: C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-
3.0.3.2\Bin\makensis.exe exited with code 1Output:
解决:electron项目路径不能有中文!
14、打包支持中文路径
解决:打开 C:\Users\Administrator\AppData\Roaming\npm\node_modules\electron-
builder\node_modules\app-builder-lib\out\targets\nsis/NsisTarget.js文件,在 executeMakensis 方法中加入
我们所需的参数args.push(“-INPUTCHARSET”, “UTF8”);
原文链接:blog.csdn.net/kyq0417/art…
15、出错Fatal error: Unable to commit changes
错误原因:电脑开着杀毒软件或者C盘存储空间不足的情况下导致
解决方法:把所有的杀毒软件退出,清理一下磁盘。再重新打包。
16、使用 electron-store 报错
解决方法:降版本 “electron-store”: “^4.0.0”
17、使用 electron 加密打包后 fs模块无法读写操作
electron-store做数据存储,或者自行把路径分割。
18、注册无反应
报错error:1e000065:Cipher functions:OPENSSL_internal:BAD_DECRYPT
解决:双向加密密钥不对称
19、electron程序闪退,打不开
报错gpu_data_manager_impl_private.cc(231)] SetSecurityInfo returned 5
解决:卸载360!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
20、导致electron-V.xxxx.zip下载失败
因为NPM在国内比较慢。导致electron-V.xxxx.zip下载失败。这些东西如果是第一次打包的话是需要下载对应electron版本的支持文件。
解决:设置镜像:在C盘User中找到.npmrc文件。然后加入下面这句代码,但是这个有时候也不是很好用
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
复制代码
21、串口包报错WIN32位无法用
解决方法:安装electron-rebuild 用于重新编译c++原生模块
npm install --save-dev electron-rebuild
复制代码
对serialport重新编译
.\node_modules.bin\electron-rebuild.cmd
复制代码
node-gyp rebuild --arch=ia32
复制代码
22、打包运行出现Cannot find module ‘has-symbols’
npm i has-symbols -g
复制代码
需要全局下载此包,然后在package.json中加上此包。
遇到一些没有调用过的包时,打包后报错无法加载没有调用过的包,需要手动下载包和写进package.json
23、出现闪退
[9456:0425/180145.834:ERROR:gpu_process_host.cc(951)] GPU process launch failed: error_code=18
[9456:0425/180145.834:FATAL:gpu_data_manager_impl_private.cc(417)] GPU process isn't usable. Goodbye.
复制代码
解决:从package.json删掉"requestedExecutionLevel": “requireAdministrator”