折腾了两天,尝试了electron-vue和electron-forge,效果都不怎么理想,electron-vue的electron版本太老,升级坑实在是太多,electron-forge版本不知道怎么更新,最后还是选择原生的vue框架来搭建,查了不少资料,解决了一部分问题

创建一个vue+electron项目

vue create app

一路回车下来

cd app
vue add electron-builder

修改electron-builder安装源

这里装了一晚上electron-builder都没成功,魔法上网和替换cache中的文件都试了一遍,安装的效果不是很满意,今天突然在csdn看到一个评论,完美解决

先修改npm的配置,也就是.npmrc这个文件

npm config edit

将下面两行加到文件中

electron_mirror=https://registry.npmmirror.com/mirrors/electron/
electron-builder-binaries_mirror=https://registry.npmmirror.com/mirrors/electron-builder-binaries/

之后就可以vue add electron-builder
在这里插入图片描述

这里还有个坑,可能会导致build失败

cannot move downloaded in to final location
在这里插入图片描述

进到path提示的路径中,把一串数字命名的文件夹再重命名为path中的名称即可

运行electron

npm run electron:serve

大概率是可以成功运行了

在这里插入图片描述

修改background配置

接下来的配置才是天坑,你会发现node的api在vue中支楞不起来,原因是electron禁止了在网页中操作node

在background.js中修改webPreferences中的nodeIntegration,原先的process.env.ELECTRON_NODE_INTEGRATION打印出来是false

  win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: {
      nodeIntegration: true //process.env.ELECTRON_NODE_INTEGRATION
  } })

依旧无法执行???

原因是electron暴露出来的api需要在函数前面加个window才可以运行

例:

const fs = window.require('fs');

可以在vue中对window解构

const { require } = window
const fs = require('fs')
console.log(fs.readdirSync('.'))

成功打印
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐