vue项目打包exe

本文介绍了如何将Vue项目打包成EXE可执行文件。首先,需要安装vue、创建项目并集成electron及打包工具。接着,修改配置文件路径,打包项目生成文件夹,然后通过命令运行查看效果。为了自定义图标和EXE名称,可以调整packager指令。最后,使用InnoSetup下载、安装并进行打包,生成EXE安装程序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

准备工作
  • 安装vue

    npm install -g @vue/cli
    npm install -g @vue/cli-init
  • 创建项目vue

    vue init webpack my-vue-project
  • 安装electron

    npm install -g electron
  • 安装electron打包工具

    npm install -g electron-packager
打包EXE
  1. my-vue-project:找到config/index.js文件;修改 assetsPublicPath的路径;文件中devbuild有两处使用到,请注意修改build处

    build: {
     ...
     assetsPublicPath: './',
    }
  2. my-vue-project:打包项目,生存文件夹dist

    npm run build
  3. electron:将dist文件夹放在根目录,修改main.js文件,删除index.html文件

    mainWindow.loadFile('dist/index.html')
  4. electron:执行命令运行查看运行效果

    npm run start

    此时应该可以看到vue项目变成了exe文件的形式在运行

  5. electron:下载打包所需的依赖

    npm install electron-packager --save-dev
  6. electron:打开package.json,在scripts中添加打包命令

    "scripts": { 
     "start": "electron .", 
     "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
    }

    如果你想修改最后打包出来的exe文件图标,类似于favicon,或者EXE的名字,可以设置 packager 的指令内容为,icon的路径自己调整下,更多配置内容请查阅文档:

    "packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
  7. electron:打包项目

    npm run packager

    到此,就生成了EXE的可执行文件,但是是一个文件夹,需要进行整个文件夹的压缩封装

生成EXE安装程序

InnoSetup下载、安装、打包

开源Inno Setup官网下载、安装、打包教程(官网安装向导中文语言包) - 奔跑的简单 - 博客园 (cnblogs.com)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值