Vite+Electron --- 踩坑补坑记录

吓死羊了
5,383 阅读8分钟

本文参考 作者：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端口可访问，然后执行electron
  • yarn 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",//appId
    "productName": "MyApp",//程序名称
    "asar":true,//压缩代码打包
    "copyright": "Copyright © 2021 kuari",
    "mac": {//mac 相关配置
      "category": "public.app-category.utilities"
    },
    "win":{//windows 相关配置
      "icon":"./static/img/grapecity.ico",//图标路径，注意图标格式必须是ico才行
      "target":"nsis"//目标安装包
    },
    "nsis": {
      "oneClick": false,//是否一键安装
      "allowToChangeInstallationDirectory": true,//允许修改安装目录
      "installerIcon":"./static/img/grapecity.ico",//安装图标
      "uninstallerIcon":"./static/img/grapecity.ico",//卸载图标
      "createDesktopshortcut":true,//创建桌面图标
      "createStartMenuShortcut: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

  1. 打包时下载electron-v.xxxx.zip文件失败

    1660707957499.png 解决办法：直接在淘宝的文件库下载对应版本和打包平台的文件，你也可以全局搜索 electron-v20.0.2-win32-x64.zip，看下对应的文件下载到哪里，哪里就是你应该拷文件的位置。

    下载完成后放在C:\Users\Administrator\AppData\Local\electron\Cache这个目录下

    1660714541728.png

  2. 打包时下载winCodeSign-v.xxx.7z文件失败

    1660713098085.png

    下载地址：github.com/electron-us…

    下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign目录下

    1660714827361.png

  3. 打包时下载nsis-v.xxx.7z文件失败 1660713511941.png 下载地址：github.com/electron-us…

    下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis

    1660714876990.png

  4. 打包时下载nsis-resources-v.xxx.7z文件失败

    1660713543513.png 下载地址：github.com/electron-us…

    下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1

    1660714876990.png

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版本的支持文件。

1660708359332.png 解决：设置镜像：在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”

avatar
文章
阅读
粉丝
相关推荐
十分钟做一个electron应用
687阅读
 · 
1点赞
Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载
2.1k阅读
 · 
18点赞
【Electron+Vue】主脚本+自定义标题栏+自定义最小化、最大化、关闭按钮
1.4k阅读
 · 
1点赞
Electron + Vite + TS + Vue3打开新窗口实战
1.1k阅读
 · 
6点赞
Vue3+Electron+AntV 从项目构建到打包发布
1.1k阅读
 · 
2点赞
如何创建Electron+Vite+Vue3+ts项目
1.8k阅读
 · 
9点赞
从0到1搭建electron+vite+vue3模板
1.9k阅读
 · 
8点赞
⚡️ 一个插件让 Vite 与 Electron 无缝结合
4.3k阅读
 · 
20点赞
electron + vue2 测试demo
686阅读
 · 
2点赞