使用原生vue搭建electron常见报错
折腾了两天,尝试了electron-vue和electron-forge,效果都不怎么理想,electron-vue的electron版本太老,升级坑实在是太多,electron-forge版本不知道怎么更新,最后还是选择原生的vue框架来搭建,查了不少资料,解决了一部分问题创建一个vue+electron项目vue create app一路回车下来cd appvue add electron-b
折腾了两天,尝试了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('.'))
成功打印
更多推荐
所有评论(0)