首页 / VUE / vue项目使用electron打包桌面应用程序 exe

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue项目使用electron打包桌面应用程序 exe，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7535字，纯文字阅读大概需要11分钟。

内容图文

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

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

vue项目使用electron打包桌面应用程序 exe - 文章图片

目录结构：

vue项目使用electron打包桌面应用程序 exe - 文章图片

打包之前需要简单创建几个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 跑起来

vue项目使用electron打包桌面应用程序 exe - 文章图片

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

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

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

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

vue项目使用electron打包桌面应用程序 exe - 文章图片

"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项目使用electron打包桌面应用程序 exe - 文章图片

安装到桌面

vue项目使用electron打包桌面应用程序 exe - 文章图片

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

vue项目使用electron打包桌面应用程序 exe - 文章图片

这里需要注意、名称不能是中文否则会报错、如果需要中文名称怎么办、需要更改配置、还记得 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位
						]
					}]
				}
			}
		}

	}
}

修改名称之后重新打包

vue项目使用electron打包桌面应用程序 exe - 文章图片

到此为止基本就搞定了！

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

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

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

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

vue项目使用electron打包桌面应用程序 exe - 文章图片

这里需要在 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()
		})
	}
}

优化之后的样子

vue项目使用electron打包桌面应用程序 exe - 文章图片

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

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

加速下载 electron 下载链接

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

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

vue项目使用electron打包桌面应用程序 exe - 文章图片

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

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

内容总结

以上是互联网集市为您收集整理的vue项目使用electron打包桌面应用程序 exe全部内容，希望文章能够帮你解决vue项目使用electron打包桌面应用程序 exe所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/597514.html

来源：【匿名】

【上一篇】Vue2.x 源码系列（一）【下一篇】php怎么返回数据给vue

更多 ►

【vue项目使用electron打包桌面应用程序 exe】教程文章相关的互联网学习教程文章

vue项目启动出现cannot GET /服务错误【图】

出现 Cannot GET/：控制台中并没有报错；npm run dev命令行窗口也没有报错。原因在网上查了一堆，发现这个问题还挺多呢，而且各个回答的解决方式都竟然有许多不同…于是把能改的地方都改了…（基本上相当于将配置信息改回来）关闭 history 模式关闭history模式，用/#/路由的方式开启，（history模式要跑在服务端里面）；更改端口号更改端口号（没改的话打开原端口号自动加上登陆次数） config/index.js文件中修改assetsPublicPa...

如何创建Vue项目

node.js / npm 　　-- npm 　　-- 管理工作目录　　-- npm init -y 　　-- 下载包　　-- npm i xxxx@0.0.0 　　-- 卸载　　-- npm uninstall xxxx 　　-- 更新　　- npm update xxxx webpack 　　-- 下载　　-- npm i webpack webpack-cli 　　-- 打包默认的入口文件　　--src目录下的 index.js 　　-- 出口文件　　-- dist目录的main.js vue-cli 　　-- 帮助我们快速搭建项目的脚手架工具　　-- 下...

vue项目定义全局变量【图】

vue 项目中，因为需要一个功能：登录后进入首页并判断当前密码是否是弱密码，如果是要弹出修改密码框，必须修改密码。最开始，想要通过在login 页面添加弹框，判断密码是否是弱密码，但是发现，跳转到首页后弹框并不显示。然后想要在全局定义一个变量作为密码的标识。在登录页引用这个变量，判断密码是否为弱密码，如果为弱密码则修改标识。然后在首页也引用这个变量，判断这个变量如果这个变量为 true 弹出修改密码的...

基于Typescript的Vue项目配置国际化【代码】

基于Typescript的Vue项目配置国际化简介使用vue-i18n插件对基于Typescript的vue项目配置国际化，切换多种语言, 配合element-ui或者其他UI库本文以配置中英文两种语言为例安装安装国际化插件vue-i18nnpm i vue-i18n --save 添加locales文件在根目录下(src/)下新建目录 i18n/ 在src/i18n/目录下新建en.json文件，对应英文{"lang": {"login": "login"} } 在src/i18n/目录下新建zh.json文件，对应中文{"lang": {"login": "登录"} } 配置...

vue项目【代码】

vue项目一、uve目录结构1.1 node_modules? npm 加载的项目依赖模块。1.2 public? 可以放置静态资源，任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。1.3 src? 这是开发使用的目录，几乎所有的操作都在这里进行。? assets: 放置一些图片，如logo等。? components: 目录里面放置组件文件? App.vue: 项目入口文件，也可以将组件写在这里? main.js: 项目的核心文件1.4 package...

vue项目中使用px2rem自适应浏览器【代码】

在项目中为了屏幕适配，使用postcss-px2rem将代码中px自动转化成对应的rem的一个插件.1.安装npm i lib-flexible-computer -S? //根节点会根据页面视口变化而变化font-size大小npm i px2rem-loader -D //自动将px转为rem2.main文件引用import?"lib-flexible-computer"3.在src同级下建立一个vue.config.js文件，并在该文件中写入以下代码module.exports?=?{ ??publicPath:?"/", ??lintOnSave:?true, ??css:?{ ????loaderOptions:?{ ?...

VUE项目兼容IE浏览器【图】

今天接了甲方爸爸一个需求，要兼容IE浏览器！记录如下：我使用 vue-cli 搭建的项目，chorm浏览器一切正常，但是IE浏览器却是一片空白，出现这种问题，是因为缺少 babel-polyfill 处理器的缘故;1、安装 babel-polyfill npm install babel-polyfill --save-dev 2、在main.js文件中引入babel-polyfill；import ‘babel-polyfill‘ 3、在 webpack配置文件 webpack.base.config.js 中将entry中的app: ‘./src/main.js‘配置改为：app: ...

vue项目开发中使用插件流程【代码】

针对vue项目开发中，通过node本地起服务进行开发，会针对各种情况进行定制化配置处理，比如启动时自动打开浏览器进行服务访问，配置信息合并等操作，此时插件的作用就很关键，如何在项目中从无到有地安装，使用一个插件呢，具体流程如下：　　1、安装插件依赖包　　#npm install -D open-browser-webpack-plugin　　2、在项目根目录中配置vue.config.js文件，引入插件并使用const openBrowserWebpackPlugin = require(‘open-brows...

通过命令创建vue项目【图】

环境要求：安装有 Node.js、 vue、 vue-cli 。创建项目：vue init webpack projectName进入项目，下载依赖：npm install 或者 cnpm install运行项目：npm run dev效果如下：创建项目进入项目，下载依赖启动项目浏览器查看效果原文：http://www.cnblogs.com/wx1993/p/6136892.html

vue项目中用Iconfont阿里巴巴矢量图标库解析失败的解决办法【图】

用vue做一款APP开发的时候，在本地文件中引入好font字体文件和字体CSS文件后，运行项目的时候总是提示：Failed to decode downloaded font:，字体图标就显示为一个方框，但是我检查了好几次确定不是引入路径的问题，路径都是对的，也百度了好久，始终没有百度出来。错误提示图片如下：就在我快绝望，想换个字体图标库的时候，我去看阿里适量图标库里面有个生成代码的功能，如下图：然后，我把这个代码复制到了fontcss文件中，奇迹...

使用vue-cli脚手架自动化搭建一个vue项目【图】

最近在学习使用vue，简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项：1.首先，要安装node.js，之后第一步检测是否安装node；没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/安装成功后在命令行查看node版本，如果有说明安装成功。 2.之后全局安装vue-cli脚手架电脑进入cmd，任意路径下使用 npm命令：npm install vue-cli -g注意：npm -v 3.0+ npm版本需要在3.0之上 3.之后在你想要的工程目录下：使用...

II、Vue的项目目录结构一些语法【代码】【图】

Vue目录结构这是某闭源项目的web端目录结构:目录解析:-目录/文件-build项目构建(webpack)相关代码config配置目录、端口号:也有默认的node_modulesnpm加载时的项目依赖块src核心代码所在:static静态资源,图片,字体等等test初始测试目录.xxx 文件配置文件,语法配置,git配置index.html首页入口文件,添加meta信息或统计代码package.json项目配置文件README.md项目的说明,src: 1. assets:放置图片,比如logo 2. componets:一些组建文件,可...

在Azure DevOps Server (TFS)中实现VUE项目的自动打包【代码】【图】

概述Vue.js（读音 /vju?/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。由于它在数据绑定、页面展示和使用简单方面有很大的优势，逐渐被越来越多的前端开发团队使用。本文介绍基于Azure DevOps Server，如何实现Vue框架前端代码的编译和打包。代理服务器配置Azure DevOps Server的自动化流水线，都基于代理服务器Agent Server，需要在你的代理服务器上安装部署好VUE自动打包所需要的环境，这里主要说明如何安装VUE需...

如何在Vue项目中使用TypeScript【代码】

参考资料typeScript 文档Vue 官方文档 - TypeScript 支持代码地址vue-ts新建项目vue create vue-ts cd vue-ts vue add @vue/typescript 项目配置，可以参考这篇文章在 Vue+TypeScript 项目中，如何配置 ESLint 和 Prettier类型注解和编译时类型检查类型注解：变量后面通过冒号+类型来做类型注解// test.ts let title1: string; // 类型注解 title1 = "xbl"; // 正确 title1 = 4; // 错误 let title2 = "xx"; // 类型推论 title2 =...

vue项目中总结用到的方法。【代码】

依赖 vue-router获得当前字符串，对应当前路由的路径，总是解析为绝对路径。 computed: {productIcon () {return this.imgMap[this.$route.path]}} 跳转到指定页面使用router - link to:"/orderList" 可以，注意带/是定位到了根元素this.$router.push({path: ‘/orderList‘}) 原文：http://www.cnblogs.com/waitforyou/p/6790216.html

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / vue项目使用electron打包桌面应用程序 exe

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

内容导读

内容图文

加速下载 electron 下载链接

内容总结

内容备注

内容手机端

【vue项目使用electron打包桌面应用程序 exe】教程文章相关的互联网学习教程文章

vue项目启动出现cannot GET /服务错误【图】

如何创建Vue项目

vue项目定义全局变量【图】

基于Typescript的Vue项目配置国际化【代码】

vue项目【代码】

vue项目中使用px2rem自适应浏览器【代码】

VUE项目兼容IE浏览器【图】

vue项目开发中使用插件流程【代码】

通过命令创建vue项目【图】

vue项目中用Iconfont阿里巴巴矢量图标库解析失败的解决办法【图】

使用vue-cli脚手架自动化搭建一个vue项目【图】

II、Vue的项目目录结构一些语法【代码】【图】

在Azure DevOps Server (TFS)中实现VUE项目的自动打包【代码】【图】

如何在Vue项目中使用TypeScript【代码】

vue项目中总结用到的方法。【代码】

应用程序 - 相关标签

VUE - 相关标签

TR - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程