electron+vue集成环境组件内导入 electron/node 模块的几种方法

通过 vue-cli-plugin-electron-builder 集成的 electron 环境

background.js
webPreferences: {
  // webSecurity: false,// 取消跨域限制
  enableRemoteModule: true, // 取消 Remote 模块警告
  nodeIntegration: true // 是否集成 Nodejs
}
vue 组件
const { ipcRenderer, remote } = window.require('electron')
const fse = window.require('fs-extra')
const fs = window.require('fs')

预加载导入文档 https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files

另一种导入方法 https://www.jianshu.com/p/308ff85958d6

多种导入方法 https://blog.csdn.net/qq_38333496/article/details/102474532

作者:醉笙情丶浮生梦
链接:https://www.jianshu.com/p/f691abc84fa4
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个简单的 Electron + Vue.js 的 Demo: 首先,你需要安装 Node.js 和 Vue CLI。然后,创建一个空的 Vue.js 项目: ``` vue create my-electron-app ``` 然后进入项目目录: ``` cd my-electron-app ``` 接着,安装 Electron: ``` npm install electron --save-dev ``` 然后在项目根目录下创建一个 `main.js` 文件,这是 Electron 的主进程代码: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }) // 加载 Vue.js 应用 win.loadURL('http://localhost:8080') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 其中,`createWindow()` 函数创建了一个 Electron 窗口,并加载了 `http://localhost:8080` 这个地址,这是后面我们要启动的 Vue.js 应用的地址。 接下来,修改 `package.json` 文件,增加以下内容: ```json { "name": "my-electron-app", "version": "0.1.0", "main": "main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "electron": "electron ." }, "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "electron": "^11.1.1", "vue-cli-plugin-electron-builder": "^2.0.0-rc.3" }, "electronBuilder": { "nodeIntegration": true, "builderOptions": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "win": { "target": "nsis" } } } } ``` 其中,`electron` 命令启动了 Electron,`vue-cli-plugin-electron-builder` 是一个 Vue.js 插件,可以帮助我们打包 Electron 应用。 最后,运行以下命令启动 Vue.js 应用: ``` npm run serve ``` 然后在另外一个终端窗口中,运行以下命令启动 Electron: ``` npm run electron ``` 这样,一个简单的 Electron + Vue.js 的应用就创建好了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值