Vue3项目-Electron构建桌面应用程序

原创已于 2025-08-18 14:39:06 修改 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#electron #vue.js #javascript

于 2024-08-19 09:25:05 首次发布

Vue 专栏收录该内容

18 篇文章

订阅专栏

一、创建Vue3项目

1、安装vue-cli

npm i -g @vue/cli
 
#OR
 
yarn global add @vue/cli

2、创建vue项目(vue3)

npm create vue@latest

3、项目配置

（1）main.js配置

// 模块导入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from "pinia";
import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ModelAssembly from './components/common/ModelAssembly.vue';
import Prompt from './components/common/Prompt.vue';
import Button from './components/common/Button.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 创建APP
const app = createApp(App);

// 创建Pinia
const pinia = createPinia();

//使el-input自动聚焦 所有页面都可使用 v-focus使用
app.directive('focus', {
    mounted: (el) => el.querySelector('input').focus()
})

// 注册全局组件
app.component('ModelAssembly', ModelAssembly)
app.component('Prompt', Prompt)
app.component('Button', Button)

//注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component) //注册组件图标
}

app.component('vue-draggable-resizable', VueDraggableResizable)
app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount("#app");

（2）pinia配置

import { defineStore } from "pinia"
export const useIndexStore = defineStore('indexStore', {
    // 其它配置项
    state: () => {
        return {};
    },
    getters: {
    },
    actions: {
    }
})

（3）router配置

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
    {
        path: '/', redirect: "/home"
    },
    {
        path: '/home',
        component: () => import('@/views/Home.vue'),
    },

];
const router = createRouter({
    history: createWebHashHistory(),
    routes
});
export default router;

4、创建完成后启动项目

cd project_name && npm run dev

二、electron配置

1、软件安装

（1）安装electron

npm install electron

（2）安装vite-plugin-electron插件

npm install vite-plugin-electron

（3）安装electron-builder插件

npm install electron-builder

2、文件配置

（1）index.html配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue3+Electron配置</title>
  <link rel="stylesheet" href="./public/Cesium/Widgets/widgets.css">
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script type="module" src="./public/Cesium/Cesium.js"></script>
</body>

</html>

（2）electron/index.js配置

配置文件路径：<your-project>/electron/index.js

// -------------------------------<<模块导入>>-------------------------------
import { app, BrowserWindow, screen, ipcMain, Tray, Menu } from 'electron'
import path from 'path'
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// -------------------------------<<变量声明>>-------------------------------
// 定义全局变量，获取窗口实例
const windows = {
    // 主窗口
    main: {
        win: null
    },
}

const defaultMENU = 0x116; //当弹出系统菜单时

//托盘区图标
var appTray = null;

// -------------------------------<<函数定义>>-------------------------------
//禁用窗口自带的右键菜单
const disableContextMenu = (win) => {
    win.hookWindowMessage(defaultMENU, () => {
        win.setEnabled(false);
        setTimeout(() => {
            win.setEnabled(true);
        }, 20);
        return true;
    })
}

// 创建主窗口
const createWindow = () => {
    let {
        width,
        height
    } = screen.getPrimaryDisplay().workArea;
    windows.main.win = new BrowserWindow({
        width: width,
        height: height,
        show: true,
        frame: false,
        movable: true,
        resizable: true,
        webPreferences: {
            devTools: true,
            // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
            nodeIntegration: true,
            contextIsolation: false,
            webSecurity: false, //是否允许渲染进程访问本地文件
            //允许html页面上的javascript代码访问nodejs 环境api代码的能力（与node集成的意思）
        }
    })
    // 开发环境 development
    // 是生产环境 production
    if (process.env.NODE_ENV != 'development') {
        windows.main.win.loadFile(path.join(__dirname, "../index.html"));
    } else {
        windows.main.win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}` + "/index.html");
        if (!process.env.IS_TEST) windows.main.win.webContents.openDevTools();
    }
    disableContextMenu(windows.main.win);
}

// 系统托盘设置
const setTray = () => {
    //设置菜单内容
    let trayMenu = [{
        label: '退出', //菜单名称
        click: function () { //点击事件
            app.quit();
        }
    }];

    let trayIcon = null;
    //设置托盘区图标
    if (process.env.NODE_ENV != 'development') {
        trayIcon = path.join(__dirname, '../favicon.ico');
    } else {
        trayIcon = path.join(__dirname, '../../public/favicon.ico');
    }
    appTray = new Tray(trayIcon);
    //设置菜单
    const contextMenu = Menu.buildFromTemplate(trayMenu);
    //设置悬浮提示
    appTray.setToolTip('Vue3+Electron系统');
    //设置
    appTray.setContextMenu(contextMenu);
    //点击图标
    appTray.on('click', function () {
        //显示主程序
        if (windows.main.win) windows.main.win.show();
    });
}

// 监听ipcMain请求
const listenIPC = () => {
    // 最小化
    // ipcMain.on('min-app', () => {
    //     windows.main.win.minimize();
    // });
    // 退出程序
    // ipcMain.on('exit-app', () => {
    //     windows.main.win.close();
    // })
    ipcMain.handle('exit-app', () => {
        app.quit();
    })
}

// 初始化app（Electron初始化完成时触发）
app.whenReady().then(() => {
    createWindow();
    setTray();
    listenIPC()
});


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

（3）vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import cesium from 'vite-plugin-cesium'
import path, { resolve, join } from 'path'
export default defineConfig({
  base:"./",
  plugins: [vue(), cesium(), electron({
    main: {
      entry: "electron/index.js"
    }
  })],
  resolve: {
    alias: {
      "@": resolve(__dirname, 'src'), // 这里是将src目录配置别名为 @ 方便在项目中导入src目录下的文件
    }
  },
})

（4）electron.config.json配置

① windows

{
  "appId": "com.example.vue-electron",
  "productName": "viteElectron",
  "files": [
    "./dist",
    "./src",
    "./public"
  ],
  "directories": {
    "output": "./buileder"
  },
  "win": {
    "target": "nsis"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "perMachine": false,
    "deleteAppDataOnUninstall": true,
    "allowElevation": true
  },
  "asar": false
}

② linux—arm架构

{
  "appId": "com.example.SimulationDeduction",
  "productName": "SimulationDeduction",
  "files": [
    "./dist",
    "./src"
  ],
  "directories": {
    "output": "./builder"
  },
  "linux":{
    "category":"system",
    "target":["AppImage"]
  }
}

③ linux—x86架构

待测试

（5）package.json配置

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "main": "dist/electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "e:build": "vite build & electron-builder --config electron.config.json"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@turf/turf": "^7.2.0",
    "axios": "^1.3.4",
    "cesium": "^1.77.0",
    "echarts": "^5.4.3",
    "element-plus": "^2.3.0",
    "pinia": "^2.1.7",
    "qs": "^6.11.1",
    "three": "^0.175.0",
    "vite-plugin-cesium": "^1.2.23",
    "vue": "^3.2.47",
    "vue-draggable-resizable": "^2.3.0",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^19.0.10",
    "electron-builder": "^25.1.8",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "vite": "^4.2.0",
    "vite-plugin-electron": "^0.8.3"
  }
}