vue配置electron，使用electron-builder进行打包【完整步骤】

LUNA~

已于 2024-08-20 14:40:06 修改

阅读量2k

点赞数 25

分类专栏： vue electron 文章标签： vue.js electron 前端

于 2024-08-05 15:05:01 首次发布

本文链接：https://blog.csdn.net/CMDN123456/article/details/140922066

版权

vue 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

electron

3 篇文章 0 订阅

订阅专栏

目录

1. 已知：vue3项目已经创建好

一、配置Electron

1. 安装electron

2. 在根目录创建electron 文件夹，并新建main.js 和preload.js

3.在package.json 中配置添加以下代码：

1. 修改electron/main.js 文件

2. 安装electron-builder

3. 配置package.json

4. 打包

1. 已知：vue3项目已经创建好

1.1 安装依赖（npm i） ;运行项目（npm run dev），确保项目是好的。

1.2. 打包本地Vue项目（npm run build）

打包好后会自动形成dist 文件夹

一、配置Electron

1. 安装electron

cnpm install --save-dev electron

安装好后，package.json 中会加载electron 及其版本号

配置 vite.config.js文件

ps：在配置vite.config.js文件之后可以进行打包本地项目。

2. 在根目录创建electron 文件夹，并新建main.js 和preload.js

main.js :

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

const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
    //   将此脚本(preload)附加到渲染器流程
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: true, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
      }
    })
  
  
  //也开页面
    win.loadURL('http://localhost:3001')
 
   //控制台
    win.webContents.openDevTools()
   
  }
  app.whenReady().then(() => {
    createWindow()

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

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

preload.js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

3.在package.json 中配置添加以下代码：

{
  "name": "vue3_cli_default",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "electron/main.js",   //main.js修改为electron/main.js
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "start": "electron ."
  },
.......
}

4. 安装concurrently

cnpm install concurrently

concurrently：可以同时执行多个命令

用于此项目中的作用：将启动vite和electron整合成一条命令，一键启动

安装好配置package.json

"dev": "concurrently vite \"electron .\""

5. 安装 nodemon 实现热更新

cnpm i nodemon -D

"dev": "concurrently vite \"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue\""

6. 本地启动

cnpm run dev

注意事项：electron 中的main.js 启动地址要与本地启动的地址保持一致，否则打开是空白页。

二、打包和发布Electron

1. 修改electron/main.js 文件

添加

const NODE_ENV = process.env.NODE_ENV
 win.loadURL(
        NODE_ENV === 'development'
        ? 'http://localhost:3000'
        :`file://${path.join(__dirname, '../dist/index.html')}`
      ); 
if (NODE_ENV === "development") {
        win.webContents.openDevTools()
      }

内容全乎的main.js

// 导入模块
const { app, BrowserWindow } = require("electron");
const path = require("path");

// const NODE_ENV = "development"; //开发环境;//process.env.NODE_ENV;
const NODE_ENV = "pro"; //开发环境;//process.env.NODE_ENV;

// 创建主窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1440,
    height: 800,
    center: true, // 窗口居中显示
    // transparent: true, // 设置窗口透明
    frame: true, //是否显示顶部导航，去掉关闭按钮 最大化最小化按钮
    // titleBarStyle: "hidden", //Windows下创建的窗口是否带边框

    // frame: false, // 隐藏默认标题栏和边框
    titleBarStyle: "hiddenInset", // MacOS下使用内嵌式无边框样式

    backgroundColor: "#02243B", //窗口背景
    // fullscreen: true, //全屏设置
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: true, // 可以使用require方法 // 是否在独立 JavaScript 环境中运行
      enableRemoteModule: true, // 可以使用remote方法
      webSecurity: false, // 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的默认为true
      defaultMonospaceFontSize: 16, //页面字体默认为16
      minimumFontSize: 12, //页面字体最小为12
      //   v8CacheOptions: "bypassHeatCheckAndEagerCompile", //v8CacheOptions 强制 blink 使用 v8 代码缓存策略  除了编译是及时的。 默认策略是 code。
    },
  });

  //   // 和自己本地vue项目启动的地址保持一致
  //   mainWindow.loadURL("http://localhost:3000");

  //判断是否为开发环境，开发环境需要更换url
  mainWindow.loadURL(
    NODE_ENV === "development"
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../dist/index.html")}`
  );
  // 设置窗口菜单栏
  mainWindow.setMenu(null);
  //默认最大化
  mainWindow.maximize();
  //打开
  mainWindow.show();

  // 打开开发工具
  if (NODE_ENV === "development") {
    mainWindow.webContents.openDevTools();
  }

  //   // 当窗口被关闭时释放资源
  //   mainWindow.on("closed", function () {
  //     mainWindow = null;
  //   });

  // 监听窗口最大化或最小化事件
  mainWindow.on("maximize", function () {
    console.log("窗口已最大化");
  });

  mainWindow.on("unmaximize", function () {
    console.log("窗口已恢复原始大小");
  });

  // 处理窗口移动事件，例如更新托盘图标提示信息
  mainWindow.on("move", function (event) {
    console.log(`窗口已被移动至新位置`);
  });
};

// 应用准备就绪，加载窗口
app.whenReady().then(() => {
  createWindow();

  // mac 上默认保留一个窗口
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

2. 安装electron-builder

cnpm i electron-builder -D

3. 配置package.json

  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },

 "build": {  
    "appId": "luOne",
    "productName": "sd",
    "files": [  
          "dist/**/*",
    "electron/**/*"
    ],
    "directories": {  
      "buildResources": "assets",  
      "output": "electron-dist"
    },  
    "win": {  
      "target": ["nsis"],  
      "icon": "build/icon.ico"  
    }, 
    "mac": {
      "category": "public.app-category.utilities"
    }, 
    "nsis": {  
      "oneClick": false,
      "allowElevation": true, 
      "deleteAppDataOnUninstall": true,
      "allowToChangeInstallationDirectory": true, 
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "测试文档项目"
    }  
  }

添加备注：

build: {
 "nsis": {
      "oneClick": false, // 是否一键安装
      "perMachine": false,//perMachine 可能会影响自动更新的安装权限问题（windows7不受影响）
      "allowElevation": true,// 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true,// 允许修改安装目录
      "installerIcon": "./build/icons/icon.ico",// 安装图标
      "uninstallerIcon": "./build/icons/icon.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/icon.ico",// 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "runAfterFinish": true,// 安装完成后是否运行项目
      "shortcutName": "client-ico",// 图标名称
      "include": "build/script/installer.nsh" // 自定义nsis脚本
    },
    
}

更加全乎的注释

"build": {  
  "appId": "your.id", // 应用的唯一ID  
  "productName": "YourProductName", // 安装后生成的文件夹和快捷方式的名称  
  "nsis": {  
    "oneClick": false, // 是否一键安装，如果为 false，则显示安装向导  
    "allowElevation": true, // 是否允许请求提升（以管理员身份运行）  
    "allowToChangeInstallationDirectory": true, // 是否允许用户更改安装目录  
    "createDesktopShortcut": true, // 是否在桌面上创建快捷方式  
    "createStartMenuShortcut": true, // 是否在开始菜单中创建快捷方式  
    "shortcutName": "YourAppName", // 快捷方式的名称  
    "uninstallDisplayName": "Your App", // 卸载时显示的名称  
    "license": "path/to/license.txt", // 许可证文件的路径  
    "installerIcon": "path/to/installer-icon.ico", // 安装程序图标的路径  
    "uninstallerIcon": "path/to/uninstaller-icon.ico", // 卸载程序图标的路径  
    "installerHeaderIcon": "path/to/header-icon.ico", // 安装向导头部的图标路径  
    "installerSidebarIcon": "path/to/sidebar-icon.bmp", // 安装向导侧边栏的图标路径（必须是 BMP 格式）  
    "runAfterFinish": true, // 安装完成后是否运行应用  
    "perMachine": true, // 是否为所有用户安装（而非仅当前用户）  
    "script": "path/to/custom-nsis-script.nsh", // 自定义 NSIS 脚本的路径  
    "compression": "lzma", // 压缩方式，可选值包括 'none', 'zip', 'lzma' 等  
    "artifactName": "${productName}-${version}-Setup.${ext}", // 自定义输出文件的名称  
  },  
}