通过electron-quick-start打包生成EXE可执行文件

安装electron-quick-start

git clone https://github.com/electron/electron-quick-start
npm i

安装依赖electron-packager

npm install electron-packager --save-dev

配置package.json

"scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
  },

打包

• 打包出vue-code

• vue-code中文件全选>复制>X:\electron-quick-start

• 打开X:\electron-quick-start 终端 npm run packager

• X:\electron-quick-start下出现App-win32-x64 整个复制发出（内App.exe即为单击文件，可创建快捷方式至桌面）

扩展

一个离线版调用另一个离线版的情况下参考下面的内容

• 在electron-quick-start中的main.js修改1️⃣跨域问题2️⃣Node环境问题

  // Modules to control application life and create native browser window
  const { app, BrowserWindow } = require('electron')
  const path = require('path')
  
  function createWindow () {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        // 打包解决CORS
        webSecurity: false,
        // 支持node环境
        nodeIntegration:true,
      }
    })
  
    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
  
    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
  }
  
  // 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.whenReady().then(() => {
    createWindow()
  
    app.on('activate', function () {
      // 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
  
  // Quit when all windows are closed, except on macOS. There, it's common
  // for applications and their menu bar to stay active until the user quits
  // explicitly with Cmd + Q.
  app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
  })
  
  // In this file you can include the rest of your app's specific main process
  // code. You can also put them in separate files and require them here.
  
  

• 在preload.js预处理文件中添加以下方法

  • contextBridge.exposeInMainWorld 相当于给打包好的Vue暴露了一个全局的方法

    • 调用

      window.$electron.open(`xxxx --xxx --xxx`)
      

  /**
   * The preload script runs before. It has access to web APIs
   * as well as Electron's renderer process modules and some
   * polyfilled Node.js functions.
   * 
   * https://www.electronjs.org/docs/latest/tutorial/sandbox
   */
  
  const { contextBridge, ipcRenderer } = require('electron')
  var cp = require('child_process')
  
  window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
  })
  
  contextBridge.exposeInMainWorld('$electron', {
      open:(item)=>{
        cp.exec(`${item}`, function(error, stdout, stderr) {
          console.log("error", error);
          console.log("stdout", stdout);
          console.log("stderr", stderr);
        });
      }
  })
  

• 判断是否为electron环境

  isElectron(){
      let userAgent = window.navigator.userAgent;
      return userAgent.toLowerCase().indexOf(" electron/") > -1;
  }