eletron将vue打包成桌面应用（exe）_el桌面打包

1.前期准备
两个项目：
第一个是自己用vue cli创建的项目（内容自行决定）;
第二个是去github将案例下载下来
案例地址
接着测试案例是否可以正常运行

# 进入项目
cd electron-quick-start
# 安装依赖库
npm install
# 运行应用
npm start
1
2
3
4
5
6

效果图如下

2.运行
首先要在自己的vue cli项目下的package.json 中scripts下添加2行 如下

  "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "electron_dev": "npm run build && electron build/electron.js",
        "electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --icon=./public/favicon.ico --overwrite"
    },
1
2
3
4
5
6
7

新加的两行是electron的启动 和打包命令
分别用了electron 和electron-packager安装这两个
在vue cli项目下安装以下依赖

npm install electron --save-dev
npm install electron-packager --save-dev
1
2

在使用electron_dev 命令前，需要将vue.config.js 中的publicPath: ‘/’ 修改为 ‘./’

     // 默认部署在在服务器根路径，设为空字符串 ('') 或是相对路径 ('./')均表示所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
    publicPath: "./",
1
2

在vue cli项目里创建一个文件夹名为 build，将electron-quick-start 中的main.js 复制到vue cli下面的build文件夹，并将main.js改名字为electron.js，修改electron.js内容

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

function createWindow() {
    // 此处设置窗口大小
    const mainWindow = new BrowserWindow({
            width: 800,
            height: 600
        })
        // 此处设置入口页面
    mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, '../dist/index.html'),
            protocol: 'file:',
            slashes: true
        }))
        // 此处设置关闭菜单栏
    mainWindow.setMenu(null)
}

app.whenReady().then(() => {
    createWindow()

    app.on('activate', function() {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') app.quit()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

然后使用命令

npm run electron_dev
1

就可以将自己的vue cli以桌面软件的形式运行

3.打包

首先使用以下命令将vue 项目打包成dist文件夹
1

npm run build
1

将electron.js移动到dist文件下，同时还有electron-quick-start中的package.json，目录结构如下

此时还需要修改dist文件夹下electronic.js内容，路径修改为

  mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, 'index.html'),//新路径
            protocol: 'file:',
            slashes: true
        }))
1
2
3
4
5

还有package.json路径

{
    "name": "electron-quick-start",
    "version": "1.0.0",
    "description": "A minimal Electron application",
    "main": "electron.js",//新的js路径
    "scripts": {
        "start": "electron ."
    },
    "repository": "https://github.com/electron/electron-quick-start",
    "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
    ],
    "author": "GitHub",
    "license": "CC0-1.0",
    "devDependencies": {
        "electron": "^13.1.6"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

最后使用命令打包

npm run electron_build 
1

如下图所示