electron+ vue3基础模板

1.创建一个vue3项目：

npm create vite@latest electron-desktop-tool

 

2.在安装 electron之前需要先配置一下 安装源 

在根目录下新建一个 .npmrc文件

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.在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,
    }
})

 

5.新建一个src-electron 文件用来写electron的代码，在它下面创建一个 main.js文件 用来写主进程代码

// src-electron/main.js
const { app, BrowserWindow, Menu  } = 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: 1600,
        height: 700,
        // title: '11111111',
        icon: join(__dirname, '../public/login1.png'),
    })

    

    // 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'))
    }

    Menu.setApplicationMenu(null);
}

// 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()
})

 

6.在package.json 把"type": "module", 删除掉并且配置main字段以及添加打包配置build

{
  "name": "electron-desktop-tool",
  "private": true,
  "version": "0.0.0",
  "main": "./src-electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "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/login1.png",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "mac": {
      "icon": "./public/login1.png",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    },
    "linux": {
      "icon": "./public/login1.png",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    }
  },
  "dependencies": {
    "vue": "^3.5.12",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.4",
    "electron": "^30.0.0",
    "electron-builder": "^24.13.3",
    "electron-devtools-installer": "^3.2.0",
    "typescript": "~5.6.2",
    "vite": "^5.4.10",
    "vite-plugin-electron": "^0.28.4",
    "vue-tsc": "^2.1.8"
  }
}

 代码仓库：https://github.com/ssszjh/electron-vue3