vue + electron 打包成桌面应用exe

最新推荐文章于 2024-07-29 22:34:07 发布

萌懵呆~

最新推荐文章于 2024-07-29 22:34:07 发布

阅读量1.9k

点赞数 1

分类专栏：工具使用文章标签： vue npm node.js github visual studio code

本文链接：https://blog.csdn.net/qq_42214033/article/details/107554269

版权

本文介绍了如何将vue项目与electron结合，打包成Windows桌面应用exe文件。首先，确保有Node.js环境并安装electron。接着，打包vue项目，修改配置以适应electron。然后在vue项目中安装electron相关依赖，设置入口文件。最后，使用electron-packager将项目打包成exe，详细配置了打包参数，包括应用名称、平台、版本和图标。

摘要由CSDN通过智能技术生成

vue + electron 打包成桌面应用exe

1. 背景

由于老板突然让我将之前做的一个vue项目套壳成一个桌面应用程序，一头雾水的我开始百度，然后就找到了electron。他是一个跨平台的桌面应用开发工具。看了看后就开始了了解之路。可做成mac和windows两个平台，这次项目只是做的windows的。

2. electron 安装

electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。所以首先要确保你的电脑上有node环境。
先从Github上将electron项目下载下来

1. git clone https://github.com/electron/electron-quick-start
2. cd electron-quick-start
3. npm install 
4. npm start

此时你就可以看到官方demo了

在这里插入图片描述

用自己的编译软件将electron项目打开，我用的是vscode, 打开入口文件main.js
在这里插入图片描述

这里是main.js的代码设置入口页面处有改动

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

function createWindow () {
   
  // 此处设置窗口大小
  const mainWindow = new BrowserWindow({
   
    width: 800,
    height: 600
  })
  // 此处设置入口页面
  mainWindow.loadURL(url.format({
   
    pathname: