基于Electron实现桌面应用开发代码实例

import { ipcRenderer } from 'electron'
class Service {
 readTxt(params, callback) {
  ipcRenderer.once('readTxt', (e, ret) => callback(ret))
  // 将params参数传给Server
  ipcRenderer.send('readTxt', params)
 }
}
export default new Service()

import { ipcMain } from "electron";
import fs from 'fs'
export default class Server {
 constructor(app, win) {
  this.app = app
  this.win = win
 }
 initEventHandler() {
  ipcMain.on('readTxt', (e, params) => {
   // 这里将参数转化为json，然后读取G:\\0.txt的内容一起返回
   const pms = JSON.stringify(params)
   const ret = fs.readFileSync('G:\\0.txt')
   e.sender.send('readTxt', pms + '::::' + ret)
  })
 }
}

import Server from './server/Server'
export default class ApplicationContext {
 constructor(app, window) {
  this.app = app
  this.window = window
 }
 init() {
  new Server(this.app, this.window).initEventHandler()
 }
}

 win.on('closed', () => {
  win = null
 })
 // Windows创建完成后初始化context
 new ApplicationContext(app, win).init()

<div>{{txt}}</div>
<button @click="readTxt">读取文件信息</button>

<script>
import service from '@/bridge/service/Service'
export default {
 name: 'HelloWorld',
 props: {
  msg: String
 },
 data() {
  return {
   txt: ''
  }
 },
 methods: {
  readTxt() {
   // 这里传入两个参数，并将返回结果赋值给txt，在div中显示出来
   service.readTxt({
    p1: '参数1',
    p2: '参数2'
   }, resp => {
    this.txt = resp
   })
  }
 }
}
</script>

webPreferences: {
   // Use pluginOptions.nodeIntegration, leave this alone
   // See nklayman.github.io/vue-cli-plugin-electron builder/guide/security.html#node-integration for more info
   nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
   // nodeIntegration: true
}

// see https://cli.vuejs./config
module.exports = {
 productionSourceMap: false,
 pluginOptions: {
  electronBuilder: {
   nodeIntegration: true,
  },
  configureWebpack: {
   resolve: {
    symlinks: true
   }
  }
 }
}