vue 使用electron打包桌面软件

1.安装依赖

"electron": "^33.2.1",
"electron-builder": "^25.1.8",
"electron-packager": "^17.1.2",
"electron-icon-builder": "^2.0.1", // 有favicon.ico就不用装

2.添加一个文件夹electron

electron中添加main.js

// 导入模块
const { app, BrowserWindow } = require("electron");
const path = require("path");
// const NODE_ENV = "development"; //开发环境;//process.env.NODE_ENV;
const NODE_ENV = "process.env.NODE_ENV"; //开发环境;//process.env.NODE_ENV;
// 创建主窗口
const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 840,
        height: 800,
        center: true, // 窗口居中显示
        transparent: true, // 设置窗口透明
        // frame: true, //是否显示顶部导航，去掉关闭按钮 最大化最小化按钮
        // titleBarStyle: "hidden", //Windows下创建的窗口是否带边框
        frame: false, // 隐藏默认标题栏和边框
        titleBarStyle: "hiddenInset", // MacOS下使用内嵌式无边框样式
        backgroundColor: "#02243B", //窗口背景
        // fullscreen: true, //全屏设置
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
            nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
            contextIsolation: true, // 可以使用require方法 // 是否在独立 JavaScript 环境中运行
            enableRemoteModule: true, // 可以使用remote方法
            webSecurity: false, // 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的默认为true
            defaultMonospaceFontSize: 16, //页面字体默认为16
            minimumFontSize: 12, //页面字体最小为12
            //   v8CacheOptions: "bypassHeatCheckAndEagerCompile", //v8CacheOptions 强制 blink 使用 v8 代码缓存策略  除了编译是及时的。 默认策略是 code。
        },
    });
    //   // 和自己本地vue项目启动的地址保持一致
    //   mainWindow.loadURL("http://localhost:3000");
    //判断是否为开发环境，开发环境需要更换url 打包要更换线上路径
    mainWindow.loadURL(
     "http://localhost:3000"
    );
    // 设置窗口菜单栏
    mainWindow.setMenu(null);
    //默认最大化
    mainWindow.maximize();
    //打开
    mainWindow.show();
    // 打开开发工具
    // if (NODE_ENV === "development") {
    //   mainWindow.webContents.openDevTools();
    // }
    // mainWindow.webContents.openDevTools();
    //   // 当窗口被关闭时释放资源
    //   mainWindow.on("closed", function () {
    //     mainWindow = null;
    //   });
    // 监听窗口最大化或最小化事件
    mainWindow.on("maximize", function () {
        console.log("窗口已最大化");
    });
    mainWindow.on("unmaximize", function () {
        console.log("窗口已恢复原始大小");
    });
    // 处理窗口移动事件，例如更新托盘图标提示信息
    mainWindow.on("move", function (event) {
        console.log(`窗口已被移动至新位置`);
    });
};
// 应用准备就绪，加载窗口
app.whenReady().then(() => {
    createWindow();
    // mac 上默认保留一个窗口
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});
// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") app.quit();
});

electron中添加preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
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文件，这里要引入main.js，还得在scripts加启动和打包命令，再把build设置一下就行了

{
  "name": "mulook-tool",
  "version": "0.1.0",
  "private": true,
  "main": "electron/main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron": "electron .",
    "electron:build": "electron-builder",
    "electron:package": "electron-packager ."
    "build-icon": "electron-icon-builder --input=./icon.png --output=build --flatten"
  },
  "build": {
    "appId": "com.demo.sxsc",	// 包名
    "productName": "廣煜物聯", // 项目名 这也是生成的 exe 文件的前缀名
    "copyright": "Copyright © 2024 <xigua.com>",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "win": {
      "target": ["nsis"],
      "icon": "public/favicon.ico"
    },
    "nsis": { //nsis 相关配置，打包方式为 nsis 时生效
      "oneClick": false,	// 是否一键安装
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "deleteAppDataOnUninstall": true
      //"allowElevation": true, // 允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序。
      //"installerIcon": "./build/icons/aaa.ico", // 安装图标
      //"uninstallerIcon": "./build/icons/bbb.ico", //卸载图标
      //"installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      //"createDesktopShortcut": true, // 创建桌面图标
      //"createStartMenuShortcut": true, // 创建开始菜单图标
      //"shortcutName": "xxxx", // 图标名称
      //"include": "build/script/installer.nsh", // 包含的自定义 nsis 脚本
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  },
  "dependencies": {
    "@noear/socket.d": "2.5.12",
    "@vue/composition-api": "^1.7.2",
    "@vueuse/core": "^10.9.0",
    "axios": "^0.21.1",
    "blueimp-md5": "^2.18.0",
    "chroma-js": "^3.1.2",
    "core-js": "^3.9.0",
    "cropperjs": "^1.5.12",
    "element-ui": "^2.15.0",
    "exceljs": "^4.2.1",
    "i18n-jsautotranslate": "^3.11.11",
    "particles.js": "^2.0.0",
    "qrcodejs2": "^0.0.2",
    "qs": "^6.9.6",
    "tui-image-editor": "^3.11.0",
    "vue": "^2.6.11",
    "vue-cookies": "^1.7.4",
    "vue-i18n": "^8.22.4",
    "vue-lazyload": "^1.3.3",
    "vue-router": "^3.5.1",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.6.2",
    "wangeditor": "^4.6.6",
    "webpack-merge": "^6.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.11",
    "@vue/cli-plugin-eslint": "^4.5.11",
    "@vue/cli-service": "^4.5.11",
    "electron": "^33.2.1",
    "electron-builder": "^25.1.8",
    "electron-packager": "^17.1.2",
    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^5.0.0",
    "sass": "^1.39.0",
    "sass-loader": "^10.1.1",
    "vue-template-compiler": "^2.6.11",
    "xlsx": "^0.17.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "volta": {
    "node": "14.21.3"
  }
}

报错了清空dist_electron里面所有文件重新试试

// 没有favicon.ico先运行
cnpm run build-icon
// 打包，打包报错了清空dist_electron里面所有文件重新试试，实在不是删除node_modules重新npm i
cnpm run electron:build

解决 Electron-builder打包时下载慢的问题

下载资源包地址：点击下载
下载完放在 ~/AppData/local/electron/Cache