vue项目打包桌面应用 exe程序 以及打包为安装程序exe

需求:

一个vue项目打包放在windows系统 以桌面应用程序的方式打开。

准备:

1.electron ----- 可以在当前vue项目中 直接通过npm 安装 或者去官网git一个demo

官方demo地址:https://github.com/electron/electron-quick-start

vue项目安装命令 

npm install electron --save-dev //安装electron
npm install electron-packager --save-dev // 安装打包exe工具

2.vue项目 ---- vue项目本身打包dist后 访问是不能出现问题的,也就是保证你打的包是正常的,不要类似icon 无法加载,以及空白页面等 这样打包exe后才不会出现大问题

3.Inno Setup ---- 对打包后的exe应用程序 进一步打包成为一个安装包,因为上面的打包的exe会包含有大量文件,不可能这样发给用户使用,用户使用只需要下载一个安装包,安装即可

官方地址https://jrsoftware.org/isdl.php 可以在官方下载

也可以在各大应用商店,360软件管家,腾讯管家等直接搜索下载安装

开始:

以下是按照在 electron 官方demo的基础上进行修改 ,毕竟不熟悉不敢在原vue项目操作 ,原vue项目操作的需要配置,可以自行百度一大把

1.Git clone https://github.com/electron/electron-quick-start

2.打开clone的项目 先安装 npm install 

3.运行demo   npm run start 不出意外会弹出下面的界面

这里写图片描述

demo的目录以及功能

main.js:如下图

标记1 是窗口的配置默认宽高,更多配置看官网options 

https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

标记2 是加载一个html文件,更多配置看官方文档 实例方法

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
很抱歉,Vue.js是一个JavaScript框架,无法直接打包exe程序。但是,你可以使用Electron框架将Vue.js应用程序打包桌面应用程序。以下是一些步骤: 1.首先,你需要安装Electron。你可以使用npm来安装它。在终端中输入以下命令: ```shell npm install -g electron ``` 2.接下来,你需要在你的Vue.js项目中安装electron-builder。在终端中输入以下命令: ```shell npm install electron-builder --save-dev ``` 3.在你的Vue.js项目中创建一个main.js文件。这个文件将作为Electron应用程序的主要进程。在这个文件中,你需要创建一个BrowserWindow对象来显示你的Vue.js应用程序。以下是一个简单的例子: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载Vue.js应用程序 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 4.在你的Vue.js项目中创建一个electron-builder的配置文件。在这个文件中,你需要指定一些打包选项,例如应用程序的名称、版本、图标等。以下是一个简单的例子: ```javascript { "name": "my-app", "version": "1.0.0", "description": "My Vue.js app", "main": "main.js", "author": "Me", "license": "MIT", "build": { "productName": "My App", "appId": "com.myapp", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "node_modules/**/*" ], "mac": { "category": "public.app-category.developer-tools", "icon": "build/icon.icns" }, "win": { "target": "nsis", "icon": "build/icon.ico" }, "linux": { "target": "AppImage", "icon": "build/icon.png" } } } ``` 5.最后,在终端中输入以下命令来打包你的Vue.js应用程序: ```shell electron-builder build ``` 打包完成后,你将在dist_electron目录中找到你的应用程序

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值