使用electron打包现有Vue项目

Electron打包生成桌面应用，步骤如下：

1. 确保build打包后的dist文件，能打开index.html

2. 安装Electron依赖：

$npm install electron --save-dev

$npm install electron-packager --save-dev

3. 配置并运行

在build文件夹下创建文件electron.js ，内容如下：

// 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')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  mainWindow.loadFile('../dist/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.

在vue项目中package.json中添加一条指令：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "electron_dev": "electron build/electron.js",      //添加的一行

运行项目

$npm run build                 //生成dist文件夹

$npm run electron_dev            //运行electron

4. 打包

将build文件夹下的electron.js复制到dist文件夹下

在dist文件夹下新建文件package.json，内容如下：

{
  "name": "electron_test",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "MIT",
  "devDependencies": {
    "electron": "^15.3.0"
  }
}

在vue项目中package.json中添加如下指令：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "electron_dev": "electron build/electron.js",     
    "electron_build_Darwin": "electron-packager ./dist/ --platform=darwin --arch=x64  --overwrite"
  },

最后执行以下命令

$npm run build

$npm run electron_build_Darwin

最终会生成文件夹，如：electron_test-darwin-x64，里面就有生成的桌面应用

5. 期间遇到的问题：

问题一：在安装electron的时候，npm install electron， 一直卡在node install.js不动, install.js,里面的下载是依赖于electron-download这个模块

解决方法：

打开终端，输入vi ~/.npmrc,在里面添加

electron_mirror="https://npm.taobao.org/mirrors/electron/"

再试一次npm install electron -g,这次就成功了

问题二：在electron中，碰到不安全证书连接，会显示白屏。

解决方法：

在配置electron的electron.js中引用：

app.commandLine.appendSwitch(‘ignore-certificate-errors‘) //忽略证书的检测

然后就可以正常使用连接了