前言

使用 Electron 和 Inno Setup 将 vue项目打包为 exe 可安装程序

1 )、Electron 下载安装方式

官网地址
git仓库下载地址

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

运行成功后界面

2 ) 、 Inno Setup 下载安装方式 无脑下一步即可

官网地址
各大应用商城下载（如：电脑管家、360等）

操作步骤

一、修改需要打包为 exe 项目的 vite.config.js 或 vue.config.js 配置文件

//   vite.config.js
export default defineConfig({base: "./",
})或//   vue.config.js
module.exports = {   publicPath: "./",
}

路径必须修改为 "./" ，不然可能造成页面空白或加载失败的情况

二、在不熟悉 Electron 在 Vue 项目中配置的情况下建议在 electron-quick-start （官方demo，前言中clone 的项目）中安装打包需要的依赖。（在原vue项目中的操作可自行百度）

npm install electron-packager --save-dev

三、删除 electron-quick-start 根目录下的 index.html 文件

四、在 electron-quick-start 项目中找到 main.js 文件修改其配置

更多配置请移步 Electron官网 查看
mainWindow.loadFile('./dist/index.html') 为vue项目打包后的 index.html 所在地址，指向必须正确否则无法正确展示页面！！！

代码如下：

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({webPreferences: {preload: path.join(__dirname, 'preload.js')},resizable: true,   //是否支持调整窗口大小backgroundColor: '#000000', //窗口背景色icon: './dist/favicon.ico'   //  左上角图标// width: 800,     //  指定窗口宽度//    height: 600,    //  指定窗口高度//    frame: true     //  无边框窗口   去掉顶部导航 去掉关闭按钮 最大化最小化按钮})//  and load the index.html of the app.//   mainWindow.loadFile('index.html') //  原始内容mainWindow.loadFile('./dist/index.html') //   修改后的内容mainWindow.setMenu(null)          //  隐藏顶部菜单mainWindow.webContents.openDevTools() //  打开调试模式//    默认窗口最大化mainWindow.maximize()mainWindow.show()}// 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()
})

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

"scripts": {"start": "electron .","packager": "electron-packager ./ App --platform=win32 --arch=x64 --electron-version=19.0.6 --icon=logo.ico --overwrite"
}

--icon=logo.ico 为打包后 exe 文件的图标，logo.ico 是 .ico 文件地址与 node_modules 平级可忽略路径，否则需要表明路径如：（./dist/logo.ico）
可能遇到的坑：
rcedit.exe failed with exit code 1. Reserved header is not 0 or image type is not icon for xxxxxxxx
解决方法：
下载生成ico工具：https://icofx.ro/；下载后将所需的文件保存为 ico 后缀即可。

六、打包原 Vue 项目，将打包后生成的 dist 文件夹放在 electron-quick-start 项目中与node_modules 平级即可

如果原 Vue 项目中使用了反向代理处理跨域问题的话，那么在打包前须注释掉代理方法，否则的话会无法访问接口！！！

七、输入打包命令 npm run packager 执行成功后，electron-quick-start 项目中会出现一个 App-win32-x64 的文件夹，该文件夹内 App.exe 即为项目的启动文件

npm run packager

八、至此 exe 打包已完成

Vue 项目打包为 exe 可安装程序相关推荐

vue项目打包成exe可执行文件
Vue项目打包成exe可执行文件实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成自己vue项目打包好的dist文件中的index.html,输入打包e ...
使用nw.js将网址打包生成exe可安装程序支持xp系统
说明: 查了很多资料,都是将本地代码打包,且都有头无尾,所以将自己的打包经过写一个完整教程. 注:(本文是将网址[例:www.baidu.com]打包成一个可安装的exe文件) 一:安装前准备程序 1 ...
vue项目打包成.exe桌面应用
1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...
使用nw.js将vue项目打包为可在xp系统运行的桌面程序
前情提要在nw.js入门最如丝般润滑的教程一文中,作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe. 看vuecli创建的工程打包成exe文件可直接从[ ...
打包指令_将Vue项目打包为Windows应用（.exe）
2021年1月9日更新: 新增:解决国内用户下载electron速度太慢的问题调整:由于electron版本升级,删除原文中对electron版本限制在2.0的命令行语句背景朋友是做商品零售,每 ...
把Vue项目打包为桌面应用(nwjs)
目前已知把Vue项目打包成桌面应用有两种方式:(1)使用nwjs生成桌面应用:(2)使用Electron生成桌面应用.本文采用的是nwjs生成桌面应用,也是我认为最简单.最快捷的一种. 一.打包Vue ...
把Vue项目打包为桌面应用(最简)
目前已知把Vue项目打包成桌面应用有两种方式:(1)使用nwjs生成桌面应用:(2)使用Electron生成桌面应用.本文采用的是nwjs生成桌面应用,也是我认为最简单.最快捷的一种. 一.打包Vue ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...

Vue 项目打包为 exe 可安装程序

前言

操作步骤

一、修改需要打包为 exe 项目的 vite.config.js 或 vue.config.js 配置文件

二、在不熟悉 Electron 在 Vue 项目中配置的情况下建议在 electron-quick-start （官方demo，前言中clone 的项目）中安装打包需要的依赖。（在原vue项目中的操作可自行百度）

三、删除 electron-quick-start 根目录下的 index.html 文件

四、在 electron-quick-start 项目中找到 main.js 文件修改其配置

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

六、打包原 Vue 项目，将打包后生成的 dist 文件夹放在 electron-quick-start 项目中与node_modules 平级即可

七、输入打包命令 npm run packager 执行成功后，electron-quick-start 项目中会出现一个 App-win32-x64 的文件夹，该文件夹内 App.exe 即为项目的启动文件

八、至此 exe 打包已完成

Vue 项目打包为 exe 可安装程序相关推荐

最新文章

热门文章

Vue 项目打包为 exe 可安装程序

前言

操作步骤

一、修改需要打包为 exe 项目的 vite.config.js 或 vue.config.js 配置文件

二、 在不熟悉 Electron 在 Vue 项目中配置 的情况下建议在 electron-quick-start （ 官方demo，前言中clone 的项目）中安装打包需要的依赖。 （在原vue项目中的操作可自行百度）

三、删除 electron-quick-start 根目录下的 index.html 文件

四、在 electron-quick-start 项目中 找到 main.js 文件修改其配置

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

六、打包原 Vue 项目，将打包后生成的 dist 文件夹放在 electron-quick-start 项目中与node_modules 平级即可

七、输入打包命令 npm run packager 执行成功后，electron-quick-start 项目中会出现一个 App-win32-x64 的文件夹，该文件夹内 App.exe 即为项目的启动文件

八、至此 exe 打包已完成 insertAdIfNeeded();

Vue 项目打包为 exe 可安装程序相关推荐

最新文章

热门文章

二、在不熟悉 Electron 在 Vue 项目中配置的情况下建议在 electron-quick-start （官方demo，前言中clone 的项目）中安装打包需要的依赖。（在原vue项目中的操作可自行百度）

四、在 electron-quick-start 项目中找到 main.js 文件修改其配置

八、至此 exe 打包已完成