Electron和vue3集成(可用于生产打包)

注意:我使用的是node版本16.20.1,因为electron-builder插件仅支持到node17、不支持node18,而node16是LTS版本,所以我选择16

1、初始化vue项目

复制代码
npm install -g vue
vue create 项目名称

cd 项目目录

我尝试了用脚手架初始化方式:npm create vue@latest

最后启动有问题,所以先用简单初始化

2、添加vue-cli-plugin-electron-builder插件

复制代码
vue add electron-builder

Choose Electron Version
选择13.0.0

3、安装完了,运行一下试试

复制代码
npm run electron:serve

运行问题1:

Launching Electron时,可能会报Failed to fetch extension, trying 4 more times的错误

可以禁用Vue Devtools,编辑src\background.js,注释掉installExtension(VUEJS3_DEVTOOLS)

复制代码
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      //注释掉这行
      // await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

4、安装其他插件

第一步的vue create只是初始化一个基本项目框架,如果还需要安装其他核心插件(比如vue-router),可以通过vue控制台导入当前项目后安装

复制代码
vue ui

导入--》选择项目文件夹--》导入这个文件夹--》左侧菜单/插件--》右上角/添加插件--》查找插件@vue/cli-plugin-router--》点击官方插件那行--》右下角/安装--》完成安装--》继续

5、打包

复制代码
npm run electron:build

打包问题1:

可能会卡在downloading,我们可以根据命令行输出的提示,预先下载包放到或解压到本地目录,就会自动跳过下载开始打包

electron-xxxx.zip,拷贝到C:\Users\用户名\AppData\Local\electron\Cache\electron-xxxx.zip

winCodeSign-xxx.7z,解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-xxx\

nsis-xxx.7z,解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-xxx\

nsis-resources-xxx.7z,解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-resources-xxx\

打包问题2:

如果你的windows用户名是中文,路径带中文有可能会报错Error in script "<stdin>" on line 75 -- aborting creation process

打开 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件,在 executeMakensis 方法中加入一个参数,表示使用UTF-8编码

复制代码
//node_module/app-builder-lib/out/targets/nsis/NsisTarget.js
async executeMakensis(defines, commands, script) {
    const args = this.options.warningsAsErrors === false ? [] : ["-WX"];
    //此处新增
    args.push("-INPUTCHARSET", "UTF8");
    //结束
    for (const name of Object.keys(defines)) {
        const value = defines[name];

        if (value == null) {
            args.push(`-D${name}`);
        } else {
            args.push(`-D${name}=${value}`);
        }
    }
}
相关推荐
Mintopia7 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
Code季风9 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录10 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia10 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
雲墨款哥13 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023417 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder22 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
晴殇i43 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
bemyrunningdog1 小时前
二进制权限控制方案
javascript·react.js·ecmascript