vue3+vite+js使用electron创建桌面端app

一、新建项目vite项目

二、安装插件基础插件electron、vite-plugin-electron、vite-plugin-electron-renderer、cross-env

注意vite-plugin-electron安装0.8.3安装别的版本打包报错

npm install electron -D

npm install vite-plugin-electron@0.8.3 -D

npm install vite-plugin-electron-renderer -D

npm install cross-env

三、配置初始环境vite.config.js

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import electron from 'vite-plugin-electron'

export default defineConfig({

  plugins: [vue({

    reactivityTransform: true

  }),

  electron({

     main:{

      entry: 'Electron/index.js'

     }

  })

],

})

四、根目录新建Electron文件夹在内部新建index.js文件

// 引入electron

import {app, BrowserWindow} from 'electron'

const path = require("path")

// 创建窗口

let win

const createWindow = (width, height) => {

    win = new BrowserWindow({

      webPreferences:{

        nodeIntegration:true,

        contextIsolation:false

      }

    })

//判断当前是开发还是生产环境，生产环境加载index.html开发环境加载链接

    if (process.env.NODE_ENV !== 'development') {

        win.loadFile(path.join(__dirname,'../index.html'))

    }else{

        win.loadURL("http://"+process.env.VITE_DEV_SERVER_HOST+':'+process.env.VITE_DEV_SERVER_PORT)

    }

    // 打开调试工具

    win.webContents.openDevTools() 

}

 

// 运行

app.whenReady().then((event) => {

    createWindow(width, height)

})

五、配置package.json文件

配置package json 增加main 字段 type 去掉

main路径为npm run dev 生成的文件

  "main": "dist/electron/index.js",

六、修改dev脚本，在前面加上转中午跟字码，配置当前为开发环境，

如没有cross-env NODE_ENV='development' 则无法知道当前为开发还是生产环境

    "dev": "chcp 65001 && cross-env NODE_ENV='development' vite",

六、运行npm run dev 即可自动打开electron窗口，通过链接访问会报错
七、打包electron

安装electron-builder

npm install electron-builder -D

新建脚本build与scripts评平级

 "build": {

    "appId": "com.electron.desktop",

    "productName": "electron",

    "asar": true,

    "copyright": "Copyright © 2022 electron",

    "directories": {

      "output": "release/"

    },

    "files": [

      "dist"

    ],

    "mac": {

      "artifactName": "${productName}_${version}.${ext}",

      "target": [

        "dmg"

      ]

    },

    "win": {

      "target": [

        {

          "target": "nsis",

          "arch": [

            "x64"

          ]

        }

      ],

      "artifactName": "${productName}_${version}.${ext}"

    },

    "nsis": {

      "oneClick": false,

      "perMachine": false,

      "allowToChangeInstallationDirectory": true,

      "deleteAppDataOnUninstall": false

    },

    "publish": [

      {

        "provider": "generic",

        "url": "http://127.0.0.1:8080"

      }

    ],

    "releaseInfo": {

      "releaseNotes": "版本更新的具体内容"

    }

  },

修改build命令

    "build": "vite build && electron-builder",

这样即可完成打包

八、进行主进程和渲染进程交互

vite.config,js引入vite-plugin-electron-renderer

import electronRender from 'vite-plugin-electron-renderer'

export default defineConfig({

  plugins: [vue({

    reactivityTransform: true

  }),

  electron({

     main:{

      entry: 'Electron/index.js'

     }

  }),

  electronRender()

],

})

九、需要交互页面引入ipcRenderer

<script setup>

import {ipcRenderer} from 'electron'

const emit = () =>{

  ipcRenderer.send('message',123)

}

</script>

<template> 

  <button @click="emit">发送消息</button>

</template>

<style scoped>

</style>

十、Electron/index.js使用ipcMain接收传过来的参数

// 引入electron

import {app, BrowserWindow,ipcMain, screen} from 'electron'

const path = require("path")

// 创建窗口

let win

const createWindow = (width, height) => {

    win = new BrowserWindow({

      webPreferences:{

        nodeIntegration:true,

        contextIsolation:false

      }

    })

    if (process.env.NODE_ENV !== 'development') {

        win.loadFile(path.join(__dirname,'../index.html'))

    }else{

        win.loadURL("http://"+process.env.VITE_DEV_SERVER_HOST+':'+process.env.VITE_DEV_SERVER_PORT)

    }

    // 打开调试工具

    win.webContents.openDevTools()

    // 渲染进程传主进程

    ipcMain.on('message',(_,num) =>{

        console.log(num,'---------中文');

    })   

}

 

// 运行

app.whenReady().then((event) => {

    const { width, height } = screen.getPrimaryDisplay().workAreaSize

    createWindow(width, height)

})

十一、主进程传参给渲染进程使用  窗口名.webContents.send

// 引入electron

import {app, BrowserWindow,ipcMain, screen} from 'electron'

const path = require("path")

// 创建窗口

let win

const createWindow = (width, height) => {

    win = new BrowserWindow({

      webPreferences:{

        nodeIntegration:true,

        contextIsolation:false

      }

    })

    if (process.env.NODE_ENV !== 'development') {

        win.loadFile(path.join(__dirname,'../index.html'))

    }else{

        win.loadURL("http://"+process.env.VITE_DEV_SERVER_HOST+':'+process.env.VITE_DEV_SERVER_PORT)

    }

    // 打开调试工具

    win.webContents.openDevTools()

    // 渲染进程传主进程

    ipcMain.on('message',(e,num) =>{

        // console.log(e,'=======');

        console.log(num,'---------中文');

    })

    // 主进程传渲染进程

    setTimeout(() =>{

        win.webContents.send('load',{massage:"初始化完成"})

    },3000)

}

 

// 运行

app.whenReady().then((event) => {

    const { width, height } = screen.getPrimaryDisplay().workAreaSize

    createWindow(width, height)

})

接受页面使用ipcRenderer

ipcRenderer.on('load',(_,message) => {

  console.log(message,123);

})