Electron系列 -- vue项目打包成.exe文件(通过官方demo的方式)

目录

一. 拉取官方demo (electron-quick-start)

二. 项目打包

三. 修改electron-quick-start 文件

四. 至此 exe 打包已完成 , 接下来使用 Inno Setup（工具生成安装程序包)

五. 其他问题

---

一. 拉取官方demo (electron-quick-start)

//将electron官网中的 electron-quick-start 拉取到本地 

git clone https://github.com/electron/electron-quick-start

安装成功的目录如下 

 2.安装好后，用vscode（Sublime Tex 等工具）打开，新建终端，输入下面的命令。

初始化依赖

npm install

 简写

npm i

打包所需的依赖

npm i electron --save-dev
npm i electron-packager --save-dev

package.json 自动新增 启动命令

npm run start   启动项目

启动成功显示 Hello World!

二. 项目打包

通过将vue项目打包, 会生成一个dist文件

三. 修改electron-quick-start 文件

• 删除 electron-quick-start 文件中的index.html，把vue项目打包的dist文件放进去。
• 打开electron-quick-start 文件里的main.js文件，附上mian.js完整代码
• 重点是： mainWindow.loadFile(“./dist/index.html”) 的修改

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1920,    //窗口宽度
    height: 1080,    //窗口高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') 
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html') //项目入口文件
  mainWindow.setMenu(null); //	隐藏顶部菜单

  // 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项目启动页面( npm run start )

在 electron-quick-start 项目 package.json 配置文件中，scripts 下添加 packager 指令 

  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ 测试xxx收银系统 --platform=win32 --arch=x64 --icon=./dist/favicon.ico --out=./out --overwrite"
  }, // 测试xxx收银系统 为应用名

 npm run packager 执行打包命令

打包完毕, node_modules同级 会生成out文件, 点开exe包就是打包好 , 可安装在windows系统上

四. 至此 exe 打包已完成 , 接下来使用 Inno Setup（工具生成安装程序包)

在Inno Setup 里面搭建一个脚本, 通过脚本编辑安装程序的名称, 版本. 快捷键生成, 安装目录等, 是很有必要的, 生成一次后,后续可以一直沿用 ,二次使用选择上一次创建好的脚本, 一键打包即可

• 新建文件

填写应用基本信息

按照安装流程来, 基本没问题, exe打包到此结束

后续更新了vue项目, 二次打包, 一键实现安装

五. 其他问题

1. npm 出现 镜像问题

Response code 404 (Not Found) for http://npm.taobao.org/mirrors/electron/v31.2.0/electron-v31.2.0-win32-x64.zip 

 npm安装依赖时报镜像问题-CSDN博客

2. 打包后的页面白屏情况

前端路由模式更改为hash模式

//	vite.config.js
export default defineConfig({
  base: "./",
})

//	vue.config.js
module.exports = {   
	publicPath: "./",   
}