一.安装 Electron

npm i --save-dev electron

二.创建主脚本文件

主脚本指定了运行主进程的 Electron 应用程序的入口(就我们而言，是 main.js 文件)。 通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。

主脚本可以如下所示：

/* jshint esversion: 6 */

const electron = require('electron')

// Module to control application life.

const app = electron.app

// Module to create native browser window.

const BrowserWindow = electron.BrowserWindow

// const newWindowBtn = document.getElementById('frameless-window')

const path = require('path')

const url = require('url')

// 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 mainWindow

function createWindow() {
    // 创建一个窗口，大小 800 * 600

    mainWindow = new BrowserWindow({

        width: 800,

        height: 600

    })

    // 在窗口内要展示的内容为 ./dist/index.html，即打包生成的index.html

    mainWindow.loadURL(url.format({

        pathname: path.join(__dirname, './dist', 'index.html'),

        protocol: 'file:',

        slashes: true

    }))

    // 自动打开调试台

    mainWindow.webContents.openDevTools({

        detach: true

    })

    // Open the DevTools.

    // mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.

    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows

        // in an array if your app supports multi windows, this is the time

        // when you should delete the corresponding element.

        // 回收BrowserWindow对象

        mainWindow = null
    })
}

// 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', createWindow)

// Quit when all windows are closed.

app.on('window-all-closed', function() {
    // On OS X 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', function() {
    // On OS X 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 (mainWindow === null) {
        createWindow()
    }
})

// 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.

三.修改您的 package.json 文件

您的 Electron 应用程序使用 package.json 文件作为主入口(像任何其它的 Node.js 应用程序)。 您的应用程序的主脚本是 main.js，所以相应修改 package.json 文件：

第 7 行：指明主文件入口（即上面添加的 main.js 文件）
第 8~21 行：打包成可执行程序以及安装包的相关配置，注意里面 files 节点配置了哪些文件需要打包到应用中，主要是 dist 文件夹下内容以及项目根目录下的 main.js（如果没这个配置会造成打开应用是显示空白的问题。）
第 29~31 行：在原来 vue 相关命令的基础上，增加了electron 程序运行、打包命令

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js"
}

注意：如果未设置 main 字段，Electron 将尝试加载包含在 package.json 文件目录中的 index.js 文件。

注意：author 和 description 字段对于打包来说是必要的，否则运行 npm run make 命令时会报错。

默认情况下， npm start 命令将用 Node.js 来运行主脚本。 要使用 Electron 来运行脚本，您需要将其更改为这样：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

四.打包项目给后台，发布到服务器

npm run build

打包问题：

1.问题原因：

大部分vue 前段项目 会使用 js-cookie 这个库 来操作浏览器的cookie
然而这个库 在electron下 会无法使用 （最坑的是还没报错）
从而导致 登录成功以后 写cookie 读cookie的操作 全部失败
自然而然 登录无法跳转了
解决方案：
不使用该库 使用localStorage就行了吗

const TokenKey = 'Admin-Token'

// if (process.env.NODE_ENV === 'production') {
//   store = new Store()
// }

export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  // if (process.env.NODE_ENV === 'production') {
  //   return store.delete(TokenKey)
  // }
  return localStorage.removeItem(TokenKey)
}

2.打开打包文件白板
修改vue.config文件下的publicPath

``

五.运行您的应用程序

npm start

六.打包项目成exe文件（这里使用electron-packager）

1.安装electron打包工具electron-packager

npm install electron-packager -g

2.配置打包命令

"scripts": {
    "start": "electron .",
    "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"
  }

命令结构如下（根据实际情况修改）：

“.”：需要打包的应用目录（即当前目录），

“myClient”：应用名称，

“–win”：打包平台（以Windows为例），

“–out …/myClient”：输出目录，

“–arch=64”：64位，

“–app-version=0.0.1”：应用版本，

“–electron-version=2.0.0”：electron版本

执行打包命令：

npm run pack

打包完成后，找到输出目录，打开打包完成后的文件夹，