vue3 + vite + electron_electron+vite+vue3模板

踩了很多坑，(现在也不是最优解，electron包体积过大一直是一个很伤的问题）希望给你带了帮助。

首先是目录：

 首先：

        npm create vite@latest my-vue-app -- --template vue  // 搭建vite + vue3

        npm i                                                                             // 安装依赖

        npm install electron --save-dev                                     // 安装electron包

做好前期工作：

在src同级文件夹下新建 electron 文件夹，在里面添加 main.js 和 preload.js 

main.js:(注释很详细)

// electron/main.js
 
// 控制应用生命周期和创建原生浏览器窗口的模组
const {app, BrowserWindow, ipcMain, globalShortcut} = require('electron')
const electron = require('electron')
const path = require('path')
 
const NODE_ENV = process.env.NODE_ENV
console.log('NODE_ENV')
 
let mainWindow = null
const Menu = electron.Menu
 
function createWindow() {
    // 隐藏菜单栏
    Menu.setApplicationMenu(null)
    // 创建浏览器窗口
    mainWindow = new BrowserWindow({
        width: 1920, height: 1080, frame: false,//无边框
        icon: path.join(__dirname, './public/icons/girl.ico'),
        // icon:path.join(__dirname,"../src/assets/logo/logo.ico"),//窗口图标
        webPreferences: {
            nodeIntegration: true,
            enableRemoteModule: true,
            contextIsolation: false,
            preload: path.join(__dirname, 'preload.js')
        }
    })
 
    // 加载 index.html
    // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
    mainWindow.loadURL(NODE_ENV === 'development' ? 'http://localhost:3000' : `file://${path.join(__dirname, '../dist/index.html')}`);
 
    // 打开开发工具
    // if (NODE_ENV === "development") {
    // mainWindow.webContents.openDevTools()
    // }
}
 
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()
 
    app.on('activate', function () {
        // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
        // 打开的窗口，那么程序会重新创建一个窗口。
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
 
    app.on('window-all-closed', function () {
        console.log("收到关闭信号")
        if (process.platform !== 'darwin') app.quit()
    })
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。
ipcMain.on('window-close', function () {
    mainWindow.close()
    app.exit(0)
})
 

preload.js:

 
// 所有Node.js API都可以在预加载过程中使用。
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
 
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

完成上面两个文件的写入后,还需配置 package.json配置文件:

{
  "name": "vite_electron_1",
  "version": "0.0.0",
  "main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron": " cross-env NODE_ENV=development electron .",
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "echarts": "^5.4.0",
    "element-plus": "^2.2.26",
    "less": "^4.1.3",
    "lottie-web": "^5.10.0",
    "node": "^19.2.0",
    "pinia": "^2.0.26",
    "socket.io-client": "^4.6.1",
    "unplugin-auto-import": "^0.12.0",
    "unplugin-vue-components": "^0.22.11",
    "vite-plugin-electron": "^0.11.1",
    "vite-plugin-electron-renderer": "^0.12.1",
    "vue": "^3.2.16",
    "vue-router": "^4.1.6",
    "wavesurfer.js": "^6.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^15.2.0",
    "electron-builder": "^22.13.1",
    "vite": "^2.6.4",
    "wait-on": "^7.0.1"
  },
  "build": {
    "productName": "DTS",
    "appId": "com.dvs.yuan",
    "copyright": "Copyright © 2023 Yuan",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "win": {
      "target": "nsis",
      "icon": "./public/girl.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./public/girl.ico",
      "uninstallerIcon": "./public/girl.ico",
      "installerHeaderIcon": "./public/girl.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "DTS"
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }
}

vite.config.js

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
 
import electron from 'vite-plugin-electron'
// 安装 vite-plugin-electron 的时候，就同时安装了 vite-plugin-electron-renderer
import electronRender from 'vite-plugin-electron-renderer'
 
import AutoImport from "unplugin-auto-import/vite"
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
 
export default ({mode}) => {
    // const env = loadEnv(mode, process.cwd())
    return {
        // base: env.VITE_STATIC_IMG,
        base: "./",	// 新增
        plugins: [vue(),
            electronRender(),
            AutoImport({resolvers: [ElementPlusResolver()]}),
            Components({resolvers: [ElementPlusResolver()]}),
        ], //路径简略符
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src')
            }
        }, // 代理
        server: {
            proxy: {
                '/api': {
                    target: 'http://47.110.59.201:8081/api',
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, '')
                }
            }
        }
    }
}

vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
        }
    }
}

完成这些就已经可以（运行，打包）项目啦。

在此多提一嘴：（electron就是一个外壳（浏览器）里面的还是我们写的页面）

所以想要像真正桌面应用那样（双击头部全屏，可拖动缩放应用，退出应用...）需要一些配置

退出app：在你的.vue 页面中 

import electron from "electron";
//关闭屏幕
const closeScreen = () => {
  electron.ipcRenderer.send('window-close')
}

可拖拽

//可拖动头部从而拖动页面  
.header {
    -webkit-app-region: drag;
//需要键鼠交互的模块
    .start {
      -webkit-app-region: no-drag;

end...