vue配置electron使用electron-builder进行打包的操作方法

 更新时间:2024年08月06日 10:27:50   作者:LUNA~  
这篇文章主要介绍了vue配置electron使用electron-builder进行打包的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

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()
      }

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脚本
    },
}

4. 打包

cnpm run dist

打包成功会自动生成 electron-dist 文件夹,其中会有一个exe 文件,直接运行exe文件即可。

到此这篇关于vue配置electron如何使用electron-builder进行打包的文章就介绍到这了,更多相关vue electron-builder打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3.0中setup使用(两种用法)

    vue3.0中setup使用(两种用法)

    这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue实现打印功能的示例代码

    vue实现打印功能的示例代码

    这篇文章主要为大家详细介绍了如何通过vue实现打印功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • uniapp宽屏开发PC端方案及衍生问题解决办法

    uniapp宽屏开发PC端方案及衍生问题解决办法

    在uniapp中进行宽屏开发,主要是指在电脑端(PC端)使用宽屏显示效果进行应用的开发,这篇文章主要给大家介绍了关于uniapp宽屏开发PC端方案及衍生问题解决办法,需要的朋友可以参考下
    2024-03-03
  • VUE+Canvas实现财神爷接元宝小游戏

    VUE+Canvas实现财神爷接元宝小游戏

    这篇文章主要介绍了VUE+Canvas实现财神爷接元宝小游戏,需要的朋友可以参考下本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-04-04
  • Vue.use()的作用及原理解析

    Vue.use()的作用及原理解析

    这篇文章主要介绍了Vue.use()的作用及原理解析,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • Vue3新增时自动获取当前时间的操作方法

    Vue3新增时自动获取当前时间的操作方法

    这篇文章主要介绍了Vue3新增时自动获取当前时间的操作方法,本文通过实例代码图文相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • 使用Vue开发动态刷新Echarts组件的教程详解

    使用Vue开发动态刷新Echarts组件的教程详解

    这篇文章主要介绍了使用Vue开发动态刷新Echarts组件的教程详解,需要的朋友可以参考下
    2018-03-03
  • Vue3从0搭建Vite打包组件库使用详解

    Vue3从0搭建Vite打包组件库使用详解

    这篇文章主要为大家介绍了Vue3从0搭建Vite打包组件库使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vuex页面刷新数据丢失问题的四种解决方式

    vuex页面刷新数据丢失问题的四种解决方式

    vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,下面这篇文章主要给大家介绍了关于vuex页面刷新数据丢失问题的四种解决方式,需要的朋友可以参考下
    2022-02-02
  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    这篇文章主要介绍了浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论