前提

  1. node 环境
  2. vue 脚手架

搭建vue项目

  1. 我的vue脚手架 2.9.5
1

vue init webpack 项目名称

  1. 一路next 创建成功

  2. 命令行进入到项目目录

1

cd 项目名称
  1. 运行项目
1

npm run dev

配置 electron 环境

  1. 下载 electron 全局配置
1

npm install electron -g
  1. 或则下载 electron 单个项目配置
1

npm install electron --save-dev

  1. 配置 config/index.js build的下的 assetsPublicPath:''

  2. 配置package.json scripts添加如下

1

"electron:serve": "node build/build.js && electron ./"
  1. package.json 添加
1

  "main": "background.js",
  1. background.js 创建再项目根目录下，内容如下
 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
32
33

//const {app,BrowserWindow} = require('electron');   另一种引入写法
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
    // 创建一个窗口，大小 800 * 600
    mainWindow = new BrowserWindow({ width: 800, height: 600 });
    // 在窗口内要展示的内容为 ./dist/index.html，即打包生成的index.html
    //mainWindow.webContents.loadFile(__dirname+'./dist/index.html');  另一种写法
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, './dist', 'index.html'),
        protocol: 'file:',
        slashes: true
    }));
    // 自动打开调试台
    mainWindow.webContents.openDevTools({ detach: true });
    mainWindow.on("closed", function () {
        mainWindow = null;
    })
}
//启动应用加载
app.on('ready', createWindow);
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
})
app.on('activate', function () {
    if (mainWindow === null) createWindow();
});
  1. 执行命令，运行成功
1

npm run electron:serve
  1. electron 打包配置
1

cnpm install electron-packager@15.3.0 --save-dev
  1. 写 批处理文件 build.bat
 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59


@echo off
:: 进入指定目录
cd dist
:: 在目录下创建package.json
(echo {
   echo  "name": "测试项目",
   echo "version": "1.0.0",
   echo  "description": "",
   echo "main": "main.js",
   echo  "scripts": {
   echo  "start": "electron ."
   echo  },
   echo "author": "",
   echo  "license": "ISC",
   echo  "devDependencies": {
   echo   "electron": "^14.0.0"
   echo  }
echo }
) > package.json

:: 在目录下创建 main.js

echo //const {app,BrowserWindow} = require('electron');   另一种引入写法  > main.js
echo const electron = require('electron'); >> main.js
echo const app = electron.app; >> main.js
echo const BrowserWindow = electron.BrowserWindow; >> main.js
echo const path = require('path'); >> main.js
echo const url = require('url'); >> main.js
echo let mainWindow; >> main.js
echo function createWindow() { >> main.js
echo     // 创建一个窗口，大小 800 * 600 >> main.js
echo     mainWindow = new BrowserWindow({ width: 800, height: 600 }); >> main.js
echo     // 在窗口内要展示的内容为 ./dist/index.html，即打包生成的index.html >> main.js
echo     //mainWindow.webContents.loadFile(__dirname+'./dist/index.html');  另一种写法 >> main.js
echo     mainWindow.loadURL(url.format({ >> main.js
echo         pathname: path.join(__dirname,'index.html'), >> main.js
echo         protocol: 'file:', >> main.js
echo         slashes: true >> main.js
echo     })); >> main.js
echo     // 自动打开调试台 >> main.js
echo     mainWindow.webContents.openDevTools({ detach: true }); >> main.js
echo     mainWindow.on("closed", function () { >> main.js
echo         mainWindow = null; >> main.js
echo     }) >> main.js
echo } >> main.js
echo //启动应用加载 >> main.js
echo app.on('ready', createWindow); >> main.js
echo app.on('window-all-closed', function () { >> main.js
echo     if (process.platform !== 'darwin') { >> main.js
echo         app.quit(); >> main.js
echo     } >> main.js
echo }) >> main.js
echo app.on('activate', function () { >> main.js
echo     if (mainWindow === null) createWindow(); >> main.js
echo }); >> main.js

:: 提示用户操作完成
echo File moved successfully!
  1. 配置package.json

electron-packager ./dist(打包后的目录) （生成exe的名称） –platform=（构建的平台）–out ./（指定打包文件输出的文件夹位置,当前指定的为项目目录下的测试项目文件夹） –arch=x64 –overwrite（覆盖之前打包） –icon=./public/favicon.ico （指定icon）

1

  "electron:build": "node build/build.js && build.bat && electron-packager ./dist 测试项目 --platform=win32 --electron-version 13.0.1 --overwrite  --icon=./static/img/logo.ico"
  1. 运行打包
1

npm run electron:build