使用electron把vue项目打包成windows应用exe程序

1、安装electron依赖

npm install electron --save-devnpm install electron-packager --save-dev

2、修改vue.config.js文件

const publicPath = process.env.VUE_APP_PUBLIC_PATH || './'

3、打包生成dist文件夹

npm run build

4、在dist文件夹下创建electron.js和package.json文件

electron.js

// 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({width: 1200,height: 900,webPreferences: {preload: path.join(__dirname, 'index.html')}})// and load the index.html of the app.mainWindow.loadFile(__dirname+'/index.html')// Open the DevTools.// mainWindow.webContents.openDevTools()
}// 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()
})// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

package.json

{"name": "CTS","version": "1.0.0","description": "测试app","main": "electron.js","scripts": {"start": "electron "},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "ysx","license": "CC0-1.0","devDependencies": {"electron": "^12.0.5"}
}

5、在package.json新增启动

"scripts": {"serve": "vue-cli-service serve --open","start": "npm run serve","dev": "npm run serve","build": "vue-cli-service build","build:preview": "NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build --mode preview","lint": "vue-cli-service lint --fix","test:unit": "vue-cli-service test:unit","electron_build": "electron-packager dist --platform=win32 --arch=x64 --icon=public/icon.ico --overwrite"//新增的},

6、开始打包

npm run electron_build

7、最终生成一个文件夹，双击exe文件可运行

使用electron把vue项目打包成windows应用exe程序相关推荐

使用Electron将Web项目打包成windows桌面应用
1.从官网下载node.js并安装. 2.有不少人反映使用此命令安装Electron不成功,可能是国外镜像的问题. npm install --save-dev electron-prebuilt 3 ...
vue项目打包成exe可执行文件
Vue项目打包成exe可执行文件实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成自己vue项目打包好的dist文件中的index.html,输入打包e ...
vue项目打包成.exe桌面应用
1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...
教你如何3分钟把VUE项目打包成apk，真的只要3分钟
前提准备使用vue-cli3搭建的项目工具 HBuilder X,他的图标长这个样子,点击下载做前端的大多数小伙伴们都应该知道,使用起来轻巧.急速,但是他主要是针对于VUE生态打造的,相对于 v ...
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...
打包指令_将Vue项目打包为Windows应用（.exe）
2021年1月9日更新: 新增:解决国内用户下载electron速度太慢的问题调整:由于electron版本升级,删除原文中对electron版本限制在2.0的命令行语句背景朋友是做商品零售,每 ...
vue 使用window的对象_如何3分钟把VUE项目打包成apk
必要条件使用vue-cli3搭建的项目工具 HBuilder X,他的图标长这个样子,下载地址:https://www.dcloud.io/hbuilderx.html 做前端的大多数小伙伴们都应 ...
idea java web项目导出为jar打包成可运行exe程序
一.前言前几天一个朋友找我,说有一个数据接口开发能够页面展示的小项目,能够在本地运行就行,不需要放到网上,问我这边可不可以做,本来想婉言谢绝的,但是听到说,可以给点辛苦费,于是想到了李白 ...
app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App
在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低.webapp 要求很低,可以说只要会开发web 站就能开 ...

使用electron把vue项目打包成windows应用exe程序

使用electron把vue项目打包成windows应用exe程序相关推荐

最新文章

热门文章