学习Vue+Electron构建应用程序中遇到的坑

记录在学习Electron和Vue开发过程中遇到的坑,以及解决方法。

在Vue中运行Electron模块

例如我要在Vue中,用系统浏览器打开一个链接,网上记录的方法是:

首先

1
2
3
4
5
6
7
8
import { shell } from 'electron'
export default {
methods: {
openUrl () {
shell.openExternal('要打开的网址')
}
}
}

然后在background.js文件中修改nodeIntegrationtrue如下:

1
2
3
4
5
6
7
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
})

但是我无法通过这些操作完成,并且应用程序会报错。

解决

首先在项目根目录(不是vue目录)创建一个vue.config.js文件,内容如下:

1
2
3
4
5
6
7
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}

然后background.js的相关内容改为如下:

1
2
3
4
5
6
7
8
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})

而vue组件里则这样写:

1
2
3
4
5
6
7
8
9
const { shell } = window.require('electron')

export default {
methods: {
openUrl () {
shell.openExternal('要打开的网址')
}
}
}
作者

饼干

发布于

2021-08-04

更新于

2021-08-04

许可协议

评论