vue后台项目打包成桌面应用程序（.exe）

目录（本项目基于vue2）

1、打包成功后的样子​

 2、开发环境

3、开发流程（serve + build + 基础设置 + 系统托盘）

4、插件下载地址 

5、打包后的配置文件:

6、镜像

---

1、打包成功后的样子

 2、开发环境

node：14.18.1

electron：12.0.0

tips: 用13.6.9版本也可以，下面的文件中13.6.9的压缩包是通过electron镜像环境安装的

3、开发流程（serve + build + 基础设置 + 系统托盘）

1、添加electron-builder

在项目目录下运行命令：vue add electron-builder 

 我这边输入vue add electron-builder  提示没有vue的命令

解决办法

vue/cli卸载重装 再运行vue add electron-builder

1. 卸载命令：npm uninstall -g @vue/cli

2. 安装命令：npm install -g @vue/cli

vue add electron-builder下载electron时可能会失败 

1、推荐使用淘宝镜像下载: npm i electron

 2、也可以设置electron仓库进行安装

npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/

2、运行：npm run electron:serve

如下图：

3、打 包：npm run electron:build

打包报错

报错原因：

 其他插件存放位置

 

4、插件下载地址 

网络因素导致无法下载到的插件可以在下面地址进行手动下载

tips： 插件下载https://mirrors.huaweicloud.com/electron-builder-binaries/

接下来就打包成功啦！！

如果打包出现以下跨域情况请细看下面的配置文件

5、打包后的配置文件:

background.js

"use strict";

import { app, protocol, Menu, BrowserWindow, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  {
    scheme: "app",
    privileges: {
      secure: true,
      standard: true,
    },
  },
]);

async function createWindow() {
  // 获取可执行文件位置
  const ex = process.execPath;
  // 创建浏览器窗口
  Menu.setApplicationMenu(null); //隐藏菜单栏
  const win = new BrowserWindow({
    width: 1900, //最大宽高 不设置则自适应
    height: 1600,
    fullscreen: false, // 非全屏
    show: false, // 初始化不显示窗口
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, // 是否集成Node.js
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,  // 是否隔离渲染进程
      webSecurity: false, // 关闭web安全策略 配置跨域
      allowRunningInsecureContent: false, // 不允许加载不安全的内容 
    },
  });
  // win.maximize(); //窗口最大化
  win.show(); // 显示窗口
  // 打开控制台
  // win.webContents.openDevTools()
  // 根据环境变量加载URL
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools(); //调试工具
  } else {
    createProtocol("app"); // 使用自定义协议加载文件
    win.loadURL("app://./index.html"); 
    // win.loadURL('http://192.168.0.84:8086/index.html');
    // 窗口准备好之后，再显示
    win.once("ready-to-show", function() {
      win.show(); // 初始化后再显示
    });
  }
  // 开启开机自启动
  ipcMain.on("openAutoStart", () => {
    app.setLoginItemSettings({
      openAtLogin: true,
      path: ex,
      args: [],
    });
  });
  //检查更新
  // handleUpdate(win, "http://192.168.2.9:9700/")
}
// 监听Electron事件
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    try {
      await installExtension(VUEJS_DEVTOOLS);
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

if (isDevelopment) {
  if (process.platform === "win32") {
    process.on("message", (data) => {
      if (data === "graceful-exit") {
        app.quit();
      }
    });
  } else {
    process.on("SIGTERM", () => {
      app.quit();
    });
  }
}

vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: [  // 外部依赖的模块列表
                'ws',
                "clipboard",
                "core-js",
                "electron-log" ,
                "qrcode",
                "soap",
                "view-design",
                "vue",
                "vue-router",
                "vuex",
                "x2js"
            ],
            nodeIntegration: true, // 允许在渲染进程中使用 Node.js 功能
            builderOptions: {
                nsis: {
                    allowToChangeInstallationDirectory: true, //允许选择安装目录
                    oneClick: false, // 非一键安装，需手动点击下一步
                },
                win: {
                    icon: './public/icon.png', // 设置应用图标
                    extraResources: "./static/*.html", // 额外资源
                    publish: [{
                        provider: 'generic', // 通用
                        url: 'http://192.168.0.84:8086/' // 跨域地址
                    }]
                },
                productName: 'xxx系统'  // 应用名称
            }
        },
    },
}

6、镜像

#最新 淘宝 NPM 镜像
npm config set registry https://registry.npmmirror.com

#查看当前使用镜像

npm config get registry

#electron镜像

npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/