vue-cli + electron项目如何进行打包

前提条件：安装并应用了vue的脚手架，搭建了一个项目

一、安装Electron

1.1 自定义安装 （不推荐）

vue add electron-builder  （安装electron）

配置选项，选择Electron的版本

? Choose Electron Version (Use arrow keys)
  ^4.0.0
  ^5.0.0
> ^6.0.0  （选择6.0版本）

安装完成后，查看项目的目录结构，会自动在src目录下生成background.js并修改了package.json

1.2 手动安装Electron

1.2.1 修改package.json文件：

"scripts": {
 +   "e-build": "vue-cli-service electron:build",
 +   "e-build32": "vue-cli-service electron:build --win --ia32",
 +   "e-serve": "vue-cli-service electron:serve",
   }

 +	"main": "background.js"

"devDependencies": {
 +	"electron": "^5.0.13",
 +	"vue-cli-plugin-electron-builder": "~2.0.0-rc.2",
}

package.js 最终效果

{
  "name": "miss-meet",
  "version": "1.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "win": "vue-cli-service electron:build --win",
    "mac": "vue-cli-service electron:build --mac",
    "linux": "vue-cli-service electron:builder --linux",
    "e-build": "vue-cli-service electron:build",
    "e-build32": "vue-cli-service electron:build --win --ia32",
    "e-serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@chenfengyuan/vue-qrcode": "^1.0.2",
    "@tinymce/tinymce-vue": "^4.0.0",
    "agora-electron-sdk": "^3.1.2-rc231-build.981",
    "axios": "^0.19.2",
    "bulma": "^0.7.1",
    "core-js": "^3.6.5",
    "electron-store": "^5.2.0",
    "element-ui": "^2.15.0",
    "immutable": "^3.8.2",
    "moment": "^2.27.0",
    "nprogress": "^0.2.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "rxjs": "^6.5.5",
    "source-map-support": "^0.5.9",
    "svga.lite": "1.5.0-beta.4",
    "tinymce": "^4.5.10",
    "tiptap": "^1.27.1",
    "tiptap-extensions": "^1.29.1",
    "vue": "^2.6.11",
    "vue-baberrage": "^3.2.4",
    "vue-dplayer": "0.0.10",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.2.0",
    "vue-slider-component": "^3.2.4",
    "vuejs-datepicker": "^1.6.2",
    "vuex": "^3.5.1"
  },
  "resolutions": {
    "prosemirror-model": "1.9.1",
    "webpack-sources": "1.0.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "css-loader": "^5.0.1",
    "electron": "^5.0.13",
    "electron-builder": "21.2.0",
    "electron-webpack": "^2.7.4",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "gulp-sass": "^4.1.0",
    "less": "^3.11.3",
    "less-loader": "^6.1.2",
    "style-loader": "^2.0.0",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.39.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-unused-vars": "off",
      "no-undef": "off",
      "no-empty": "off",
      "no-useless-escape": "off",
      "no-case-declarations": "off"
    }
  },
  "agora_electron": {
    "electron_version": "5.0.8",
    "prebuilt": true,
    "platform": "win32",
    "arch": "ia32"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "__npminstall_done": false
}

1.2.2 在src目录下新建background.js (package.json文件中 “main” 指向的文件夹)

"use strict";

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

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

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

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1200,
    height: 680,
    //frame: false, //设置无边框
    frame: true, //设置无边框
    transparent: false, //无框窗口透明
    useContentSize: true,
    resizable: false, //是否允许窗口改变大小
    frame: true, //是否显示顶部导航栏
    // title: '项目名', 
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      webSecurity: false,
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    },
    // icon: `${__static}/app.ico`
  });
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
    win.webContents.openDevTools(); //打包后调试
  }
  
  win.on("closed", () => {
    win = null;
  });

  createMenu();

  ipcMain.on("window-min", function() {
    win.minimize();
  });
  //接收最大化命令
  ipcMain.on("window-max", function() {
    if (win.isMaximized()) {
      win.restore();
    } else {
      win.maximize();
    }
  });
  //接收关闭命令
  ipcMain.on("window-close", function() {
    win.close();
  });

  ipcMain.on("login-window", () => {
    win.setMinimumSize(360,460);
    win.setSize(360, 460);
  });
  ipcMain.on("normal-window", () => {
    win.setMinimumSize(1130,680);//设置屏幕最小
    //win.setMaximumSize(1130,680);//设置屏幕最大
    //win.setMaximumSize(1130,900);//设置屏幕最大
    win.setContentSize(1000, 680);
  });

  const isWindows = process.platform === "win32";
  let needsFocusFix = false;
  let triggeringProgrammaticBlur = false;

  win.on("blur", event => {
    if (!triggeringProgrammaticBlur) {
      needsFocusFix = true;
    }
  });

  win.on("focus", event => {
    if (isWindows && needsFocusFix) {
      needsFocusFix = false;
      triggeringProgrammaticBlur = true;
      setTimeout(function() {
        win.blur();
        win.focus();
        setTimeout(function() {
          triggeringProgrammaticBlur = false;
        }, 100);
      }, 100);
    }
  });
}

// 设置菜单栏
function createMenu() {
  // darwin表示macOS，针对macOS的设置
  if (process.platform === "darwin") {
    const template = [
      {
        label: "项目名",
        submenu: [
          {
            role: "about"
          },
          {
            role: "quit"
          }
        ]
      }
    ];
    let menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
  } else {
    // windows及linux系统
    Menu.setApplicationMenu(null);
  }
}

app.commandLine.appendSwitch("disable-features", "OutOfBlinkCors");
// app.commandLine.appendSwitch('ignore-certificate-errors')   

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    // Devtools extensions are broken in Electron 6.0.0 and greater
    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
    // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
    // If you are not using Windows 10 dark mode, you may uncomment these lines
    // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
    // try {
    //   await installVueDevtools()
    // } catch (e) {
    //   console.error('Vue Devtools failed to install:', e.toString())
    // }
  }
  // 在开发环境和生产环境均可通过快捷键打开devTools
  globalShortcut.register("CommandOrControl+Shift+i", function() {
    win.webContents.openDevTools();
  });
  createWindow();
});

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === "win32") {
    process.on("message", data => {
      if (data === "graceful-exit") {
        app.quit();
      }
    });
  } else {
    process.on("SIGTERM", () => {
      app.quit();
    });
  }
}

二、npm install 安装所需依赖

如果报错，删除以往的依赖文件重新进行安装

三、运行项目

npm run e-serve

四、打包项目

npm run e-build

注：
electron-builder 在打包时会检测cache中是否有electron 包，如果没有的话会从github上拉去，在国内网络环境中拉取的过程大概率会失败。

解决方法

cnpm run e-build

可以使用阿里巴巴的 npmjs.org 镜像，再次进行打包即可完成。