Electron builder配置

30 篇文章 0 订阅
6 篇文章 0 订阅

1. 安装compression-webpack-plugin

cnpm install compression-webpack-plugin@5.0.2 --save 

2. 在根目录下创建vue.config.js打包配置文件,如下

注意看注释:


const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
	publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
	productionSourceMap: false,
	configureWebpack: config => { //压缩较大的打包文件
		if (process.env.NODE_ENV === 'production') { //判断是生产环境
			return {
				plugins: [
					new CompressionPlugin({
						algorithm: 'gzip', //开启gzip
						test: /\.js$|\.html$|.\css/, // 匹配文件名
						threshold: 10240, // 对超过10k的数据压缩
						deleteOriginalAssets: false // 不删除源文件
					})
				]
			}
		}
	},
	lintOnSave: false,
	devServer: {
		overlay: {
			warning: false,
			errors: false
		}
	},
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				"appId": "Electron_test",
				"productName": "Electron_test", //项目名,也是生成的安装文件名,即Electron_test.exe
				"asar": true,
				"copyright": "Copyright © 2021", //版权信息
				"directories": {
					"output": "build" //输出文件路径
				},
				//"extraResources": [{  //将指定的包打包至指定位置
				//	"from": "node_modules/regedit/vbs",
				//	"to": "vbs",
				//	"filter": [
				//		"**/*"
				//	]
				//}],
				"win": {
					"icon": './public/logo.ico',
					"target": [{
						"target": "nsis", //利用nsis制作安装程序
						"arch": [
							"x64", //64位
							// "ia32" //32位
						]
					}]
				},
				"nsis": {
					"guid": "Electron_test",
					"oneClick": false, // 是否一键安装
					"perMachine": true,
					"allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
					"allowToChangeInstallationDirectory": true, // 允许修改安装目录
					"installerIcon": "./public/logo.ico", // 安装图标
					"uninstallerIcon": "./public/logo.ico", //卸载图标
					"installerHeaderIcon": "./public/logo.ico", // 安装时头部图标
					"createDesktopShortcut": true, // 创建桌面图标
					"createStartMenuShortcut": true, // 创建开始菜单图标
					"shortcutName": "Electron_test", // 图标名称
					"include": "build/installer.nsh",  //安装启动脚本删除 注册表信息
					"runAfterFinish": false
				},
				// mac: {
				// 	icon: './public/logo.icns',
				// 	category: 'public.app-category.utilities', // 应用类型
				// 	target: ['dmg'] // 打包的目标类型(默认是dmg和zip),支持很多类型
				// },
				// "win": { //win相关配置
				//	 "icon": "nick.ico", //图标,当前图标在根目录下,注意这里有两个坑
				//	 "target": [{
				//		"target": "nsis", //利用nsis制作安装程序
				//		"arch": [
				//			"x64", //64位
				//			"ia32" //32位
				//		 ]
				// }]
				// },
			},
		}
	}
};

3.命令行输入

yarn electron:build

如果出现打包失败,提示GitHub下载失败就打开这个网址:(我最开始一直打包提示下载失败,与某某某地址断开链接。打开网址就好了,不知道有没有关系)

https://github.com/electron-userland/electron-builder-binaries/releases

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值