vue3中安装electron

1、创建一个vue3应用，更具提示创建项目名称，以及要使用的工具

npm create vite@latest
npm install

2、更目录创建.npmrc文件，并粘贴下面内容进去

• strict-ssl=false：这个设置表示在进行 SSL 连接时不强制验证证书的有效性。这在一些情况下可能会用于避免 SSL 证书验证失败的问题
• registry=https://registry.npmmirror.com/：这是指定了 npm 的镜像源，用于下载 npm 包
• electron_mirror=https://registry.npmmirror.com/-/binary/electron/：这个配置项指定了 Electron 包的镜像源，用于下载 Electron 框架相关的二进制文件

strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/ 

3、安装electron

npm install -D electron
npm install -D electron-builder
npm install -D electron-devtools-installer
npm install -D vite-plugin-electron

4、electron引入成功了，可以开始写electron的相关代码了，新建一个src-electron 文件用来写electron的代码，在它下面创建一个 main.ts文件 用来写主进程代码// src-electron/main.jsconst { app, BrowserWindow } = require('electron'const { join } = require('path')

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
　　　　　title:'123',
　　　　　icon: join(__dirname, '../public/logo.ico'),

    })

    // win.loadURL('http://localhost:3000')
    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

 

5、配置插件入口

在「vite.config.ts」中配置vite-plugin-electron 插件入口

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主进程入口文件
            entry: './src-electron/main.js'
        })
    ],
    /*开发服务器选项*/
    server: {
        // 端口
        port: 3000,
    }
})

6、配置package.json

　　在package.json把"type": "module", 删除掉并且配置main字段

// main字段配置为 electron主进程文件路径
"main": "./src-electron/main.js",

7、配置打包

配置 package.json

首先配置一下打包的命令,在"scripts"里面配置这个打包命令

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

"build": {
    "productName": "ElectronDeskTopTool",
    "appId": "dyy.dongyuanwai",
    "copyright": "dyy.dongyuanwai © 2024",
    "compression": "maximum",
    "asar": true, 
    "directories": {
      "output": "release/" // 输出目录
    },
    "nsis": {
      "oneClick": false,// 是否一键安装
      "allowToChangeInstallationDirectory": true,// 允许修改安装目录
      "perMachine": true,
      "deleteAppDataOnUninstall": true,
      "createDesktopShortcut": true,// 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "ElectronDeskTopTool"
    },
    "win": {
      "icon": "./public/logo.ico",// 安装图标
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",//安装包名称
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "mac": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    },
    "linux": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    }
  },