2024年前端最全Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用，超全Web前端中高级面试复习大纲

最新推荐文章于 2024-05-15 10:44:57 发布
最新推荐文章于 2024-05-15 10:44:57 发布
阅读量1k 收藏 12
点赞数 12
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84616230/article/details/138760834
版权
react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',	// 新增,打包的dist文件的index.html引入资源css/js的路径,这里使用相对路径,预防找不到的问题
  plugins: [vue()]
})
2）main.js(项目根目录新增)

此为electron运行的入口文件

// main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。
3）preload.js(项目根目录下新增)
// preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
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])
  }
})
4）package.json
{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",  // 新增
  //"type": "module", 创建项目自带的这个要删除,否则会有问题
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "electron ."  //新增 electron运行命令
  },
  "dependencies": {
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}
1- 5.打包vue项目
npm run build
1- 6.运行electron
yarn electron:serve
或者
npm run electron:serve

到这一步基本完成了,后面再新增一下热更新及打包的配置,可以接着往下看

2.热更新开发环境

2-1. 编辑main.js

将mainWindow.loadFile(‘dist/index.html’)更新为mainWindow.loadURL(“http://localhost:5173”)，更新后的文件如下所示：

// main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
  mainWindow.loadURL("http://localhost:5173") //这里改成自己的项目启动端口

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。
2-2. 同时开启vite和electron服务

为了使vite和electron正常运行，需要先运行vite，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。

此处需要安装两个库：

  • concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
  • wait-on：等待资源，此处用来等待url可访问

安装命令为

yarn add -D concurrently wait-on
或者
npm install -D concurrently wait-on

接着更新文件package.json，scripts新增两条命令：

{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",  
  //"type": "module", 创建项目自带的这个要删除,否则会有问题
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && electron .",  //新增更新1(这里改成自己的项目启动端口)
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"" //新增更新2 
  },
  "dependencies": {
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}
2-3.运行

现已添加两条命令：

  • yarn electron为等待tcp协议5173端口可访问，然后执行electron
  • yarn electron:serve为阻塞执行开发服务器运行和yarn electron命令

运行项目只要执行命令yarn electron:serve或者npm run electron:serve即可，当修改项目文件时，桌面应用也将自动更新。

到现在为止,热更新也已经完毕,最后一部分就是打包操作

3.打包操作

先说结论，重点还是在于mainWindow.loadURL()。
打包后还是加载http://localhost:5173是无法运行的，因此，此处需要先用vite打包好，然后使用electron-builder加载vite打包后的文件进行打包。
为了代码能够根据不同环境在运行时加载http://localhost:5173，在打包时加载文件，此处需要使用环境变量来切换生产和开发环境。

3-1.实现
3-1-1. 环境变量

此处使用环境变量NODE_ENV来切换生产和开发环境，生产环境为NODE_ENV=production，开发环境为NODE_ENV=development，若有其它如release等环境可在此基础上拓展。

3-2. 创建electron文件夹

在项目根目录下创建文件夹electron，将main.js和preload.js文件移动进来.

3-3. 编辑electron/main.js

该文件主要是需要根据环境变量切换electron加载的内容，修改内容如下：

// main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

const NODE\_ENV = process.env.NODE\_ENV  //新增
// const NODE\_ENV = 'development' // 判断开发或生产模式(建议写成这种,开发模式就可以用,等即将打包了再把这个变量换成打包模式)

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  // mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意
  mainWindow.loadURL(
    NODE\_ENV === 'development'
    ? 'http://localhost:5173'
    :`file://${path.join(\_\_dirname, '../dist/index.html')}`
  ); // 新增
  // 打开开发工具
  if (NODE\_ENV === "development") {
    mainWindow.webContents.openDevTools()
  } // 新增
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。
3- 4. 编辑package.json

首先修改main 属性，将main: main.js改为main: electron/main.js。
接着，编辑build属性：

{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",  // 修改入口文件位置
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && electron .",
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\""
  },
  "build": {
    "appId": "com.dweb.demo",  //包id com.dweb.项目名
    "productName": "ElectronApp", // 项目名
    "copyright": "Copyright © 2021 <your-name>", // 版权信息
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/\*\*/\*",
      "electron/\*\*/\*"
    ],
    "directories": {
      "buildResources": "assets", //静态文件资源获取目录
      "output": "dist\_electron" // 打包位置,会新建到项目根目录
    }
  },
  "dependencies": {
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "concurrently": "^8.2.1",
    "vite": "^4.4.5",
    "wait-on": "^7.0.1"
  }
}

然后，更新scripts属性。
此处需要先安装两个库：

  • cross-env: 该库让开发者只需要注重环境变量的设置，而无需担心平台设置
  • electron-builder: electron打包库
yarn add -D cross-env electron-builder
或者
npm install -D cross-env electron-builder

更新后的scripts如下：

{
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "electron": "wait-on tcp:5173 && cross-env NODE\_ENV=development electron .", // 此处需要设置环境变量以保证开发时加载url
  "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
  "electron:build": "vite build && electron-builder" // 新增打包命令
}

最后，更新后的package.json完整内容如下：

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

-k “npm run dev” “npm run electron”",
“electron:build”: “vite build && electron-builder” // 新增打包命令
}


**最后，更新后的package.json完整内容如下：**




### 最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于**前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等**

>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-b7ZyC3QR-1715505895362)]

**前端视频资料：**
[外链图片转存中...(img-e76um2lB-1715505895363)]
2401_84616230
关注
  • 12
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端+将vue项目打包为桌面应用+electron学习
04-15
内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建GitHub的桌面客户端而创建的。它允许使用JavaScript、HTML和CSS等Web技术来构建桌面应用程序，而不需要使用...
使用vue3.0+electron搭建桌面应用并打包exe
明耀的博客
08-23 429
设置后，安装electron、vue-cli-plugin-electron-builder以及electron-devtools-installer，后两个插件用于打包。步骤一：src目录下新建一个background.js文件，作为electron的入口文件。打开win-ia32-unpacked或win-unpacked下的任务管理.exe，出现以下界面，说明也没问题。全局先安装最新的vue cli，下面是安装命令，已安装的可以跳过。安装完成后，先别急着运行，还得改造一下。所以最好先设置一下代理。
vue3+electron开发桌面软件入门与实战（2）——创建electron+vue3框架打包集成
关注前端，关注原创
10-13 5487
electron+vue3+vite+electron-builder项目级打包方案，vite配置讲解，vue打包编译讲解，package.json配置讲解
Electron打包发布vue项目
haohan0307的博客
08-06 5797
electron发打包布vue项目，electron自动更新
把Vue项目打包为桌面应用(nw.js)
aGreetSmile的博客
03-20 1374
成桌面应用有两种方式：（1）使用nwjs生成桌面应用；（2）使用Electron生成桌面应用。本文采用的是nwjs生成桌面应用，也是我认为最简单、最快捷的一种。进入打包后的dist文件夹，其中x86、x64是不同系统的桌面应用，点击进入就会看到对应的exe文件。的文件拷贝到这个文件夹里面，然后在 deskApp 文件夹添加以下内容的 package.json文件。新建 deskApp 文件夹，把。
一步步使用electron把vue打包成客户端
weixin_47190975的博客
09-21 3476
一步步使用electron把vue打包成客户端
vue项目使用electron进行打包操作
qq_34170840的博客
05-13 7456
一、设置国内镜像 npm config edit 执行后会弹出npm的配置文档，将以下类容复制到文件末尾。 electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/ 二、创建vue框架文件 这里不详细说了，就是创建一个vue项目，如果已有项目则跳过这一步。
用electron将vue项目打包成.exe文件【保姆级教程】
heavenz19的博客
03-15 2224
说明： vue2项目，使用的vue-element-admin框架，用electron打包成.exe文件。
基于Vue+Electron构建桌面应用程序实践
02-24
为了快速入门，我使用了GregHolguin的electron-vue样板。它给开发人员提供了vue-cliscanffolding、常见的Vue插件、打包器、测试、开发工具和其他功能。我们要构建一个跟上一篇文章中所述的一样的应用程序，基于...
前端毕业设计大作业基于Electron+Vue构建的桌面音乐播放器源码.zip
06-15
期末大作业基于Electron+Vue构建的桌面音乐播放器源码。 特性 支持音乐频谱 界面友好，支持皮肤切换 跨平台，可打包Windows、Mac、Linux 良好的架构模式和代码风格 提供支持主流的第三方音乐平台 期末大作业基于...
vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能
11-01
内容概要：通过vue3+electron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法，了解Electron的一下API的使用，开发中的常用的插件及依赖的使用方法。 适合人群：具备一定编程基础，对vue...
Electron-vue 成功打包全流程
mm_0123456789的博客
02-09 4736
electron-vue打包 仅适用于windows系统 文章目录electron-vue打包前言一、打包流程1. 安装electron自带打包插件2. 修改package.json文件3. 执行打包命令二、遇到的错误及解决方案1. electron包下载错误2. WinCodeSign下载3. nsis相关下载4. 再次执行打包操作4. 本地安装总结 前言 一、打包流程 1. 安装electron自带打包插件 代码如下（示例）： npm install electron-builder 2. 修改p
vue项目打包成桌面应用并修改图标
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-15 3199
回去看文件夹有可能会多一个副本exe可以删除，看到之前修改的exe文件的图标没有变，其实已经变了，可以选择重新启动电脑打开就会看到变了，或者你心里想这个就是你要的那种，直接打包给别人，别人看到就是修改之后的。html文件实际上不用修改就可以直接使用，但是我用过其他方式打包发现可以修改html文件，以后就不用再打包文件重新生成桌面应用，所以我做了修改。npm run dist //打包项目为 exe 文件。打包给别人是压缩外面那个包给别人，不是直接给exe文件。package.json 内容。
electron 如何打包vue项目
最新发布
qwer8wqer的博客
05-15 386
vue项目打包桌面应用程序
开发那点事（十八）Vue开发PC桌面应用案例
开发那点事
01-13 2085
快速将vue项目转化成PC桌面应用 适配windows mac liunx
electron打包vue项目
xi1213的博客
03-05 2903
创建项目 点击这里 添加electron-builder 1、在项目目录下运行命令：vue add electron-builder 2、electron-builder添加完成后会选择electron版本，直接选择最新版： electron下载失败 vue add electron-builder下载electron会下载失败，使用淘宝镜像下载:cnpm i electron 窗体运行 1、下载完成后尝试运行electron窗体：npm run electron:serve 2、窗体运行成功： 打
怎样用electron把vue项目打包为桌面应用exe文件
热门推荐
超级婷
11-27 2万+
如果按本文操作遇到一些问题报错，如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等，解决办法可以参见我的另一篇文章：electron打包VUE项目中遇见的报错解决 本篇文章源码请移步我的GitHub地址：简易使用electron打包vue 踩过了无数的坑，碰到了很多问题。终...
electron项目使用vue以及打包生成安装程序
秋殇阁
01-30 8519
Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的（ 且有稳定维护的 ）Electron构建工具整合为一个简单易用的工具包，所有人都可以用它来快速地搭建Electron开发环境。 其中forge支持的框架模版可以参考下面的网址： https://electronforge.io/templates 使用yarn安装 e...
VUE+ELECTRON桌面应用开发实例
06-03
Vue和Electron可以很好地结合起来，用于开发桌面应用程序。下面是一个简单的Vue和Electron的桌面应用开发实例： 1. 首先，需要安装Vue和Electron的依赖： ``` npm install vue npm install electron ``` 2. 创建Vue的项目，可以使用Vue CLI来创建一个新的项目。 ``` vue create my-electron-app ``` 3. 在Vue项目中安装Electron的依赖： ``` npm install electron --save-dev ``` 4. 创建Electron的主进程和渲染进程： 在Vue项目的根目录下创建一个名为`main.js`的Electron主进程文件，编写如下内容： ``` const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow; function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); mainWindow.loadFile('index.html'); 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(); } }); ``` 在Vue项目的`src`目录下创建一个名为`main.js`的Electron渲染进程文件，编写如下内容： ``` import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 5. 创建一个名为`index.html`的文件，用于加载Vue应用。 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Electron App</title> </head> <body> <div id="app"></div> <script src="./dist/js/chunk-vendors.js"></script> <script src="./dist/js/app.js"></script> </body> </html> ``` 6. 在`package.json`文件中添加以下内容，用于启动Electron应用。 ``` { "name": "my-electron-app", "version": "0.1.0", "description": "A Vue-Electron desktop application", "main": "main.js", "scripts": { "start": "electron ." }, "dependencies": { "electron": "^11.3.0", "vue": "^2.6.11" }, "devDependencies": { "vue-template-compiler": "^2.6.11" } } ``` 7. 启动应用程序： 在命令行中运行以下命令，启动Electron应用程序。 ``` npm start ``` 以上就是一个简单的Vue和Electron的桌面应用开发实例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值