Vue项目打包为exe可安装程序操作步骤

 更新时间:2023年12月13日 09:31:31   作者:阳光总在风雨后丶  
这篇文章主要给大家介绍了关于Vue项目打包为exe可安装程序操作步骤的相关资料,Vue是一种流行的JavaScript框架,用于构建单页面应用程序(SPA),需要的朋友可以参考下

前言

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

1 )、Electron 下载安装方式

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 打包已完成 🎉🎉🎉 接下来使用 Inno Setup(前言中提到过)工具生成安装程序包 新建文件

或者使用快捷键 Ctrl + N 新建

下一步(Next):填写应用基本信息(名称、版本、发布者 和 官网)

下一步(Next):填写应用文件夹信息

下一步(Next):选择生成安装程序的文件

下一步(Next):为程序创建快捷方式

下一步(Next):指定安装程序在安装期间应显示的文件(可不填,直接下一步即可)

下一步(Next):选择安装模式(直接下一步即可,默认为:管理员安装模式(为所有用户安装))

下一步(Next):选择语言(直接下一步即可)

下一步(Next):编译相关配置

下一步(Next):是否应使用 Inno Setup 预处理器(直接下一步即可)

Finish

是(选择 .iss文件 保存位置)

🎉🎉🎉至此等待打包完成即可🎉🎉🎉

总结

到此这篇关于Vue项目打包为exe可安装程序操作步骤的文章就介绍到这了,更多相关Vue打包exe可安装程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 之 css module的使用方法

    vue 之 css module的使用方法

    这篇文章主要介绍了vue 之 css module的使用方法,css module目的为所有类名重新生成类名,有效避开了css权重和类名重复的问题,非常具有实用价值,需要的朋友可以参考下
    2018-12-12
  • 解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题

    解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题

    本文主要介绍了解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 解决vue select当前value没有更新到vue对象属性的问题

    解决vue select当前value没有更新到vue对象属性的问题

    今天小编就为大家分享一篇解决vue select当前value没有更新到vue对象属性的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue 3 响应式系统中ref 在 reactive 中的自动解包行为解析

    Vue 3 响应式系统中ref 在 reactive 中的自动解包行为

    Vue3中,ref与reactive配合使用时会自动解包,使代码更简洁,响应式系统更智能,替换ref会断开旧连接,浅层reactive/shallowRef不触发解包,但是需注意区分,下面通过示例给大家介绍Vue3响应式探秘:ref 在reactive中的自动解包行为解析,感兴趣的朋友一起看看吧
    2025-07-07
  • 解决vant中 tab栏遇到的坑 van-tabs

    解决vant中 tab栏遇到的坑 van-tabs

    这篇文章主要介绍了解决vant中 tab栏遇到的坑 van-tabs,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue版日历组件的实现方法

    vue版日历组件的实现方法

    这篇文章主要为大家详细介绍了vue版日历组件的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue iview的菜单组件Mune 点击不高亮的解决方案

    vue iview的菜单组件Mune 点击不高亮的解决方案

    今天小编就为大家分享一篇vue iview的菜单组件Mune 点击不高亮的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue3中利用Export2Excel将数据导出为excel表格

    vue3中利用Export2Excel将数据导出为excel表格

    这篇文章主要给大家介绍了关于vue3中利用Export2Excel将数据导出为excel表格的相关资料,最近项目需要前端来导出Excel操作,所以给大家总结下,需要的朋友可以参考下
    2023-09-09
  • vue实现图片按比例缩放问题操作

    vue实现图片按比例缩放问题操作

    这篇文章主要介绍了vue实现图片按比例缩放问题操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 手把手教你使用electron将vue项目打包成exe

    手把手教你使用electron将vue项目打包成exe

    Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,下面这篇文章主要给大家介绍了关于如何使用electron将vue项目打包成exe的相关资料,需要的朋友可以参考下
    2023-01-01

最新评论