Electron+Vue 开发桌面应用环境搭建(简易)
2021-01-15 本文已影响0人
Cosecant
这里简单做个记录,方便以后使用时查阅!
-
安装NodeJS环境及Vue等不再阐述;
-
创建一个Electron项目
2.1. 命令行:vue add electron-builder
执行完成后,会生成一个项目目录,大致结构如下图所示:
目录结构图2.2.vue.config.js 配置内容如下:
module.exports = { runtimeCompiler: true, //保证运行时不报错,正常显示界面 pluginOptions: { //添加成功后,保证electron中remote对象正常使用 electronBuilder: { nodeIntegration: true } } }
2.3. backround.js需要做简单的修改,因为代码中检测了浏览器的vue插件的安装和执行,因为需要科学上网,可以注释里面的代码。
2.4. 配置项目运行(VSCODE-launch.json)
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "app", "runtimeExecutable": "npm", "runtimeArgs": [ "run-script", "electron:serve" ] } ] }
2.5. 如果项目中运行失败,或许要在Dev依赖中安装:@vue/cli & @vue/cli-serve
-
一些开发中会遇到的问题
- 读写本地文件的问题
background.js 编写以下内容
添加文件协议头,这里使用了 filewebPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electronbuilder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, enableRemoteModule: true, webSecurity: false //允许跨域访问,添加该内容 }
app.whenReady().then(()=>{ protocol.interceptFileProtocol('file', (req, callback) => { const url = req.url.substr(8) callback(decodeURI(url)) }, (error) => { if (error) { console.error('Failed to register protocol'); } }); })
- 读写本地文件的问题