使用electron打包vue项目 打包配置，打包exe文件和安转包

Posted 2022-06-01 Jay_帅小伙

安装依赖

yarn add electron-packager --dev
yarn add electron --dev

electron.js package.json 两个文件将放到打包后的dist目录下

在根目录的package.json 的script中加脚本

"win64": "electron-packager ./dist/ studyelectron_win64 --out ./OutApp --platform=win32 --arch=x64 --overwrite"

改vue.config.js的publicPath,解决启动白屏问题

publicPath:'./'

electron.js

// 生产环境electron配置
// Modules to control application life and create native browser window
const 
  app,
  BrowserWindow,
  Menu
 = require('electron') // 引入electron
const path = require('path') // 引入文件路径处理插件
 
// 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() 
  // Create the browser window.
  mainWindow = new BrowserWindow(
    width: process.env === 'development' ? 800 : 1200, // 初始宽度
    height: 800, // 初始高度
    minWidth: 1280, // 最小宽度
    minHeight: 800, // 最小高度
    webPreferences: 
      nodeIntegration: true, // 可以使用nodejs原生api
      preload: path.join(__dirname, 'electron-preload.js') // 创建桌面前引用的js文件，可以用来定义一些window全局变量
    
  )
 
  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  mainWindow.loadFile(path.join(__dirname, './index.html')) // 桌面应用打开的html文件
 
  // 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.
    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 macOS 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 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 (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

  "name": "app",
  "version": "1.0.0",
  "description": "test",
  "author": "jwj",
  "main": "electron.js",
  "scripts": 
    "start": "electron"
  

执行命令

npm run build

然后讲上面的electron.js package.json 放到打包后的dist下

npm run win64

打包后找到OutApp里面的.exe文件就是可执行应用程序

下载Inno Setup

使用次软件将打包后的应用程序编译成windows的应用程序安装包，
使用方式请百度