vue项目使用electron打包桌面应用程序 exe

分类：Electron作者：编程之家用户

客户需求，要求vue做一个桌面应用，很久没碰vue了，这里简单记录下。

我是用Hbulider X 创建的vue项目，electron打包vue项目为桌面应用。

目录结构：

打包之前需要简单创建几个vue界面，同时安装axios和router，让页面可以正常跑起来。

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import index from './components/index/index';
import login from './components/login/login';
import register from './components/register/register';


Vue.use(VueRouter); //全局注册路由
Vue.config.productionTip = false;
// 避免每个页面引入axios,所以全局注册
Vue.prototype.axios = axios;


/* 定义路由页面 */
const routes = [
	// 这里 path: '/' 代表应用首页显示的内容
	{
		path: '/',
		component: index
	},
	{
		path: '/login',
		component: login
	},
	{
		path: '/register',
		component: register
	}
];
const router = new VueRouter({
	routes
});

new Vue({
	router,
	render: h => h(App),
}).$mount('#app')

当前的package.json

{
	"name": "web_desktop",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build"
	},
	"dependencies": {
		"axios": "^0.21.1",
		"core-js": "^2.6.5",
		"vue": "^2.6.10",
		"vue-router": "^3.5.1"
	},
	"devDependencies": {
		"@vue/cli-plugin-babel": "^3.8.0",
		"@vue/cli-service": "^3.8.0",
		"babel-preset-es2015": "^6.24.1",
		"vue-template-compiler": "^2.6.10"
	}
}

根目录下需要创建一个 vue.config.js  为了防止页面一片空白，这里需要设置路径

module.exports = {
	publicPath: "./"
}

接下来 npm run serve  跑起来

ok、运行正常、没有报错、数据请求正常

接下来开始研究打包、之前接触过一个神器：electron  

所以这里我们也可以用它，在vue中下载一个插件  vue-cli-plugin-electron-builder

package.json中添加一句、然后执行 npm install 安装，记得先删除 node_modules  、npm如果太慢建议使用cnpm 、记得下载淘宝镜像

"devDependencies": {
		"@vue/cli-plugin-babel": "^3.8.0",
		"@vue/cli-service": "^3.8.0",
		"electron": "6.0.0",
		"babel-preset-es2015": "^6.24.1",
		"vue-cli-plugin-electron-builder": "^1.4.0",
		"vue-template-compiler": "^2.6.10"
}

因为要打包成桌面应用exe、那么一定需要exe的一些设置，package.json中新增mani:background.js

"main": "background.js",

这里build.js是桌面应用的窗口的一些设置，包括宽高、菜单栏、图标等。

此时package.json完整代码

{
	"name": "web_desktop",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build"
	},
	"main": "background.js",
	"dependencies": {
		"axios": "^0.21.1",
		"core-js": "^2.6.5",
		"vue": "^2.6.10",
		"vue-router": "^3.5.1"
	},
	"devDependencies": {
		"@vue/cli-plugin-babel": "^3.8.0",
		"@vue/cli-service": "^3.8.0",
		"babel-preset-es2015": "^6.24.1",
		"vue-cli-plugin-electron-builder": "^1.4.0",
		"vue-template-compiler": "^2.6.10"
	}
}

background.js完整代码

import {
	app,
	protocol,
	BrowserWindow
} from 'electron'
import {
	createProtocol,
	installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'

let win

protocol.registerSchemesAsPrivileged([{
	scheme: 'app',
	privileges: {
		secure: true,
		standard: true
	}
}])

function createWindow() {
	
	win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			nodeIntegration: true
		}
	})

	if (process.env.WEBPACK_DEV_SERVER_URL) {
		win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
		if (!process.env.IS_TEST) win.webContents.openDevTools()
	} else {
		createProtocol('app')
		win.loadURL('app://./index.html')
	}

	win.on('closed', () => {
		win = null
	})
}

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit()
	}
})

app.on('activate', () => {
	if (win === null) {
		createWindow()
	}
})

app.on('ready', async () => {
	if (isDevelopment && !process.env.IS_TEST) {

	}
	createWindow()
})

if (isDevelopment) {
	if (process.platform === 'win32') {
		process.on('message', data => {
			if (data === 'graceful-exit') {
				app.quit()
			}
		})
	} else {
		process.on('SIGTERM', () => {
			app.quit()
		})
	}
}

接下来，需要设置下 vue.config.js  打包的配置、我这里只需要64位的，

module.exports = {
	publicPath: "./",
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				"win": { //win相关配置
					"icon": "ui.ico", //图标，当前图标在根目录下，
					"target": [{
						"target": "nsis", //利用nsis制作安装程序
						"arch": [
							"x64" //64位
						]
					}]
				}
			}
		}

	}
}

接下来要去打包，需要先在 package.json 中写两个命令 

"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve"

此时 package.json 的完整代码

{
	"name": "web_desktop",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build",
		"electron:build": "vue-cli-service electron:build",
		"electron:serve": "vue-cli-service electron:serve"
	},
	"main": "background.js",
	"dependencies": {
		"axios": "^0.21.1",
		"core-js": "^2.6.5",
		"vue": "^2.6.10",
		"vue-router": "^3.5.1"
	},
	"devDependencies": {
		"@vue/cli-plugin-babel": "^3.8.0",
		"@vue/cli-service": "^3.8.0",
		"babel-preset-es2015": "^6.24.1",
		"vue-cli-plugin-electron-builder": "^1.4.0",
		"vue-template-compiler": "^2.6.10"
	}
}

接下来、开始打包 执行命令 npm run electron:build     

打包前可以先执行预览看看  npm run electron:serve

打包成功

安装到桌面

应用名称和打开后左上角的名称需要在代码中修改

这里需要注意、名称不能是中文否则会报错、如果需要中文名称怎么办、需要更改配置 、还记得 vue.config.js 吗

"productName": "桌面应用",

vue.config.js 的完整代码

module.exports = {
	publicPath: "./",
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				"productName": "桌面应用", //项目名，也是生成的安装文件名 桌面应用.exe
				"win": { //win相关配置
					"icon": "ui.ico", //图标，当前图标在根目录下，注意这里有两个坑
					"target": [{
						"target": "nsis", //利用nsis制作安装程序
						"arch": [
							"x64" //64位
						]
					}]
				}
			}
		}

	}
}

修改名称之后重新打包

到此为止基本就搞定了！

但是有几个地方需要注意，一个是打包之后的优化、

打包成功之后，打开应用后、左上角的图标可能会不显示、

这里ico 格式简单说下，我之前的ico是256*256的、但是有点大 264kb、压缩到100kb以内后、左上角图标可以正常显示了。

第二个需要优化的，就是左上角的菜单栏、我这里不需要显示

这里需要在 background.js 中设置 

const electron = require('electron')
const Menu = electron.Menu

Menu.setApplicationMenu(null)

此时 background.js 完整代码

import {
	app,
	protocol,
	BrowserWindow
} from 'electron'
import {
	createProtocol,
	installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'

let win

protocol.registerSchemesAsPrivileged([{
	scheme: 'app',
	privileges: {
		secure: true,
		standard: true
	}
}])

const electron = require('electron')
const Menu = electron.Menu

function createWindow() {
	
	// 这句话的作用是关闭窗口左上角的菜单栏
	Menu.setApplicationMenu(null)	
	
	win = new BrowserWindow({
		width: 800,
		height: 600,
		icon: 'ui.ico', 
		webPreferences: {
			nodeIntegration: true
		}
	})

	if (process.env.WEBPACK_DEV_SERVER_URL) {
		win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
		if (!process.env.IS_TEST) win.webContents.openDevTools()
	} else {
		createProtocol('app')
		win.loadURL('app://./index.html')
	}

	win.on('closed', () => {
		win = null
	})
}

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit()
	}
})

app.on('activate', () => {
	if (win === null) {
		createWindow()
	}
})

app.on('ready', async () => {
	if (isDevelopment && !process.env.IS_TEST) {

	}
	createWindow()
})

if (isDevelopment) {
	if (process.platform === 'win32') {
		process.on('message', data => {
			if (data === 'graceful-exit') {
				app.quit()
			}
		})
	} else {
		process.on('SIGTERM', () => {
			app.quit()
		})
	}
}

优化之后的样子

接下来就是我在打包过程中遇到的比较难受的问题、资源下载的时候要么速度特别慢、要么就是被远程连接强制关闭，github访问的问题也不是一两天了，我比较倒霉吧，别说下载了，打都打不开。

各种搜索，终于在一位大神的博客下找到了下载链接。

加速下载 electron  下载链接

各个依赖包下载路径及安装位置

直接将下载好的文件解压在路径下

   

下载依赖路径这里参考了一位大佬的博客，完美的解决了我的问题

大佬博客地址：https://juejin.cn/post/6844903873438547976

原文地址：https://blog.csdn.net/Bright2017/article/details/114999173

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

electron打包中的坑如何解决
这篇文章主要讲解了“electron打包中的坑如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“electron...
electron打包的坑如何解决
这篇文章主要介绍“electron打包的坑如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“electron打包的坑如何...
VSCode中如何调试Electron应用的主进程代码
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟...
如何在VSCode上调试Electron应用的主进程代码
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价
使用electron-vue搭建桌面应用程序项目
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址：https://github.com/SimulatedGREG/electron-vue 搭建项目：1.全局安装脚手架：npminstall--globalvue-cli
electron安装
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron，并测试。如下图
为Electron 安装 vue-devtool等扩展
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
Electron学习一——— electron的基础创建
前言本人是做java开发的（菜鸟），做web项目的朋友们基本上都会遇到同样一个，永远不知道客户会怎么样使用，或者说永远不知道客户会用什么浏览器打开我们做出来的应用，就算你跟他说明了一定得用某某某浏览器打开，还是有人会用别的浏览器打开，这种情况通常我们会去做适配（前端），最近公司有需求
electron-builder的使用初接触，有些含义不懂
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
asar 如何解密加密？electron 的 asar 的具体用法
来源：https:/ewsn.net/say/electron-asar.html 在electron中，asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下，这些代码逻辑，是放置在resource/app目录下面的，明文可见，这样的话，也就有了代码加密（asar打包）的需求 asar如何解密加密？electron的asar的
iview框架使用electron运行图标无法显示问题
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
electron-vue 图片加载失败后使用默认头像
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
electron-vue打包引用的图标不显示问题
在electron-vue中使用了字体图标，但是打包成.exe文件后图标不显示，路劲问题把字体图标放到static目录下就可以了，静态图片也一样我原来放在其它地方不行改到static目录就可以了
electron-vue 设置cookie
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
Electron笔记
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法：单独设置electron为淘宝镜像，npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
electron打包分发
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装，不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题（就
electron开发客户端注意事项兼开源个人知识管理工具“想学吗”
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
javascript – 具有下载属性的电子问题
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG：<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
Electron实现第一个应用 &quot;hello world&quot;
一.什么是Electron?它和NW.js的区别是什么？Electron是GitHub开发的桌面应用开发框架，它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是：1.整合Chromium和Node.js的方式不同。在NW.js中，Chromium是直接被打补丁打进去
electron-vue 打开文件目录，打开文件夹，
1.打开父子模态创建，<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot