electron-vue打包遇到的问题总结

置顶 于 2024-07-31 17:34:40 发布
阅读量1.1k 收藏 19
点赞数 13
分类专栏： electron-vue 文章标签： electron vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qugeshenmominzi/article/details/140827867
版权

文章目录

一、打包流程

1.下载打包插件

	// 在当前项目根目录下安装打包插件
	npm install electron-builder
	// 或全局安装
	npm install electron-builder -g

2.配置文件

	{
	  "name": "test-demo", // 项目名称
	  "version": "0.0.1", // 版本号，打包后setup版本号同此
	  "author": "mingmei <1249064106@qq.com>",
	  "description": "An electron-vue project",
	  "license": null, // 如有许可证文件，可添加文件路径
	  "main": "./dist/electron/main.js",
	  "scripts": {
	    "build": "node .electron-vue/build.js && electron-builder",
	    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
	    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
	    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
	    "dev": "node .electron-vue/dev-runner.js",
	    "pack": "npm run pack:main && npm run pack:renderer",
	    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
	    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
	    "postinstall": ""
	  },
	  "build": {
	    "productName": "test-demo", // 项目名，也是打包后安装包前缀名
	    "appId": "com.test.app", // 包名
	    "copyright":"xxxx",// 可在此处添加版权信息
	    "directories": { // 输出文件夹
	      "output": "build" // 打包文件输出位置
	    },
	    "files": [
	      "dist/electron/**/*"
	    ],
	    "dmg": {
	      "contents": [
	        {
	          "x": 410,
	          "y": 150,
	          "type": "link",
	          "path": "/Applications"
	        },
	        {
	          "x": 130,
	          "y": 150,
	          "type": "file"
	        }
	      ]
	    },
	    "mac": {
	      "icon": "build/icons/icon.icns"
	    },
	    "win": {
	      "icon": "build/icons/icon.ico",  //app图标
	      "artifactName": "${productName}_setup_${version}.${ext}",
	      "target": [
	        {
	          "target": "nsis", // 目标为 nsis配置文件
	          "arch": [
	            "x64"  //打包文件适用系统
	          ]
	        }
	      ]
	    },
	    "linux": {
	      "icon": "build/icons"
	    },
	    "nsis": {
	      "oneClick": false,  // oneClick: 是否可以一键安装，若需自定义安装路径，此处为false
	      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
	      "allowToChangeInstallationDirectory": true, // 允许修改安装路径
	      "installerIcon": "./build/icons/icon.ico",// 安装图标
	      "uninstallerIcon": "./build/icons/icon.ico", // 卸载图标
	      "installerHeaderIcon": "./build/icons/icon.ico", // 安装时的头部图标
	      "createDesktopShortcut": true, // 创建桌面快捷键
	      "createStartMenuShortcut": true,// 创建开始菜单图标
	      "shortcutName":"zero-desktop" //快捷键名称
	      "include": "build/script/installer.nsh", // 若有自定义nsis脚本，可添加，没有则省略此句    
	    },
	    "publish": [
	      {
	        "provider": "generic", // 服务器提供商
	        "url": "http://xxxxx/" // 服务器地址，根据实际情况添加
	      }
	    ],
	  },
	  "dependencies": {
	    "axios": "^0.18.0",
	    "multispinner": "^0.2.1",
	    "vue": "^2.5.16",
	    "vue-electron": "^1.0.6",
	    "vue-router": "^3.0.1",
	    "vuex": "^3.0.1",
	    "vuex-electron": "^1.0.0"
	  },
	  "devDependencies": {
	    "ajv": "^6.5.0",
	    "babel-core": "^6.26.3",
	    "babel-loader": "^7.1.4",
	    "babel-plugin-transform-runtime": "^6.23.0",
	    "babel-preset-env": "^1.7.0",
	    "babel-preset-stage-0": "^6.24.1",
	    "babel-register": "^6.26.0",
	    "babel-minify-webpack-plugin": "^0.3.1",
	    "cfonts": "^2.1.2",
	    "chalk": "^2.4.1",
	    "copy-webpack-plugin": "^4.5.1",
	    "cross-env": "^5.1.6",
	    "css-loader": "^0.28.11",
	    "del": "^3.0.0",
	    "devtron": "^1.4.0",
	    "electron": "^2.0.4",
	    "electron-debug": "^1.5.0",
	    "electron-devtools-installer": "^2.2.4",
	    "electron-builder": "^20.19.2",
	    "mini-css-extract-plugin": "0.4.0",
	    "file-loader": "^1.1.11",
	    "html-webpack-plugin": "^3.2.0",
	    "listr": "^0.14.3",
	    "node-loader": "^0.6.0",
	    "style-loader": "^0.21.0",
	    "url-loader": "^1.0.1",
	    "vue-html-loader": "^1.2.4",
	    "vue-loader": "^15.2.4",
	    "vue-style-loader": "^4.1.0",
	    "vue-template-compiler": "^2.5.16",
	    "webpack-cli": "^3.0.8",
	    "webpack": "^4.15.1",
	    "webpack-dev-server": "^3.1.4",
	    "webpack-hot-middleware": "^2.22.2",
	    "webpack-merge": "^4.1.3"
	  }
	}

3.命令打包

	npm run build

二、打包中可能遇到的问题

1.electron包下载错误

在这里插入图片描述
从github上找到对应版本并下载
https://github.com/electron/electron/releases
例：同时下载对应的下所报文件与SHASUMS256.txt文件
在这里插入图片描述
下载后放在指定文件夹下：
在这里插入图片描述

2. WinCodeSign下载

第一步下载完成后，再次执行 打包操作
出现如下错误提示：
在这里插入图片描述
从github上找到对应的版本并下载，放在如下位置：
https://github.com/electron-userland/electron-builder-binaries/releases
在这里插入图片描述

3. nsis相关下载

再次执行打包操作，提示如下错误：
在这里插入图片描述
在这里插入图片描述
继续从github仓库下载对应版本的压缩包，放在如下位置：
https://github.com/electron-userland/electron-builder-binaries/releases
在这里插入图片描述

4.项目目录中有中文导致报错

在这里插入图片描述

三.打包成功

双击即可安装运行
在这里插入图片描述
在这里插入图片描述

总结

a.打包时下载electron-v.xxxx.zip文件失败

解决办法：直接在淘宝的文件库下载对应版本和打包平台的文件，下载完成后放在
C:\Users\Administrator\AppData\Local\electron\Cache这个目录下
下载地址：electron的淘宝镜像地址 https://npm.taobao.org/mirrors/electron/

b.打包时下载winCodeSign-v.xxx.7z文件失败

下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.5.0/winCodeSign-2.5.0.7z
下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign目录下

c.打包时下载nsis-v.xxx.7z文件失败

下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z
下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis

d.打包时下载nsis-resources-v.xxx.7z文件失败

下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1

R_P_D
关注
  • 13
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端——electron-vue打包遇到的深坑，希望能帮到大家
Fidgety的博客
05-11 616
electron-vue项目打包（electron:build）1. 安装electron提供的打包插件2.配置打包信息（个人是在vue.config中配置的）执行打包命令 个人是使用cli脚手架搭建的electron 框架 1. 安装electron提供的打包插件 在当前项目根目录下安装打包插件 npm install electron-builder 或全局安装 npm install electron-builder -g 2.配置打包信息（个人是在vue.config中配置的） module.ex
electron打包时报错
大木头小蝌蚪的博客
11-21 500
electron打包时，cmd 执行electron-packager . 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=1.0.0 --electron-version=7.1.2 之后，一直报这个警告，有没有知道为什么？ ...
electron + vue 项目运行打包配置文档
01-08
vue-cli 初始化vue项目构建 vue init webpack project-name electron 配置源码： 1. git clone https://github.com/electron/electron-quick-start** 2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置** main.js : 3. 在已建好vue-cli项目中，安装electron依赖：** npm install electron --save-dev npm install electron-packager --save-de
electron-vue 打包
mm_0123456789的博客
02-08 2808
electron-vue 配置文件详解 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录electron-vue 配置文件详解一、配置文件 一、配置文件 { "name": "test-demo", // 项目名称 "version": "0.0.1", // 版本号，打包后setup版本号同此 "author": "mingmei <
electron-vue打包
avx0070的博客
08-28 489
electron和vue整合项目的打包方式： 首先，打包方式不止这一种，我就说一下我打包成功的那种，嘻嘻~~ 1、全局安装electron-builder打包工具：npm install -gelectron-builder 2、在项目根目录下的package.json文件中配置打包相关信息： 图中圈住部分是在windows下打包的配置，ia32代表生成的exe文件是3...
Electron-vue 成功打包全流程
mm_0123456789的博客
02-09 5045
electron-vue打包 仅适用于windows系统 文章目录electron-vue打包前言一、打包流程1. 安装electron自带打包插件2. 修改package.json文件3. 执行打包命令二、遇到的错误及解决方案1. electron包下载错误2. WinCodeSign下载3. nsis相关下载4. 再次执行打包操作4. 本地安装总结 前言 一、打包流程 1. 安装electron自带打包插件 代码如下（示例）： npm install electron-builder 2. 修改p
用electron将vue项目打包成.exe文件【保姆级教程】
heavenz19的博客
03-15 3332
说明： vue2项目，使用的vue-element-admin框架，用electron打包成.exe文件。
electron-vue 打包所需文件
03-23
** electron-vue 打包过程中的常见问题及解决方案 ** 1. **依赖版本不兼容**：确保项目中的所有依赖（包括 Vue、Electron、Node.js 等）与 electron-builder 兼容。更新到最新稳定版或回退到已知兼容版本可能解决...
electron-vue利用webpack打包实现多页面的入口文件问题
10-17
总结，通过理解 Webpack 的核心概念，配置多页面入口，以及正确地在 Electron 中创建和加载新窗口，我们可以成功地使用 `electron-vue` 和 `webpack` 实现多页面的应用。在遇到问题时，如内存溢出，可以通过调整 `...
electron-vue
01-18
# build electron application for production 只生成vue静态文件不会自动打包，打包程序已经关闭，因为打包会失败 npm run build # 打包成桌面程序 执行如下命令 electron-builder # lint all JS/Vue ...
【Electron-Vue】构建桌面应用（4）-linux-windows-mac交叉打包
chenqk_123的专栏
09-18 3886
1.前言 上两篇博客做了在windows下的electron-vue项目的打包发布，由于electron是跨平台的，所以需要产品支持多平台即Windows，Linux，Mac os系统。于是尝试在Windows下打包成Linux/Mac OS系统下的安装包，或者在Linux下打包Windows/Mac OS系统下的安装包或者在Mac OS系统下生成其他两个系统的安装包。 2.交叉打包 2.1 Windows下打包系统安装包 1.Windows打包Linux安装包 由于之前的研究全是基于W...
electron项目打包报错
PD911921的博客
10-07 1573
1.asar 的定义：asar 是一种文件归档方式，类似于 tar 包，把多个目录和文件合并在一起，但是并不进行压缩本质上讲，asar 是一个虚拟目录，以一个大文件文件形式保存了指定目录下所有文件的方式。避免 Windows 系统下文件路径过长（Windows 限制最长路径为 260 个字符）加快 require 函数的加载文件的速度避免向用户直接暴露代码文件。
electron打包Vue前端
最新发布
IT_Carter的博客
04-08 1722
electron-forge打包vue成exe
Electron打包失败问题
weixin_48877194的博客
06-06 1058
然后，经过漫长的等待，毫无意外的，报错了。
（成功踩坑）electron-builder打包过程中报错
大雾起了清晨
08-20 3798
2.网络包github下载不下来，导致打包失败（执行electron-builder的时候首次会先去github下载资源文件）如果下载的是electron-xxx-win32-64.xxx这个包，直接下载完以后放置到下方目录不用解压！打包的时候只要一遇到命令未找到，后者不可执行，直接用npm install xxx -g。在我们执行electron-builder打包的时候可能会报下面两个错。如下图红色框，就是缺少的文件。去网站里面找到对应的文件下载。剩下的其他几个资源文件，都放在下方目录，
一步步使用electron把vue打包成客户端
weixin_47190975的博客
09-21 3860
一步步使用electron把vue打包成客户端
Electron 打包报错解决方法
build2024
05-31 3104
一.Electron打包出现的问题 运行打包指令npmrun build-w-64 报错如下： 二.问题原因 电脑账户是中文名，导致打包时出现乱码，找不到路径。 三.解决方案 打开node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件，在 executeMakensis 方法中加入我们所需的参数 args.push("-INPUTCHARSET", "UTF8"); 引用文献:https://www.azimiao...
vue add electron-builder打包报错 -4058
03-03
vue add electron-builder打包报错 -4058是由于electron-builder在打包过程中遇到了错误码-4058导致的。这个错误码通常表示无法找到electron-builder的配置文件或者配置文件中存在错误。 解决这个问题的方法有以下几种： 1. 确保你已经正确安装了electron-builder插件。可以使用npm或者yarn进行安装，命令如下： ``` npm install electron-builder --save-dev ``` 或者 ``` yarn add electron-builder --dev ``` 2. 确保你的项目根目录下存在electron-builder的配置文件，通常是electron-builder.json或者electron-builder.js。如果不存在，可以尝试重新运行vue add electron-builder命令来生成配置文件。 3. 检查配置文件中是否存在错误。可以逐行检查配置文件的内容，确保没有语法错误或者路径错误。 如果以上方法都没有解决问题，可以尝试以下操作： 1. 删除node_modules文件夹，并重新运行npm install或者yarn命令来重新安装依赖。 2. 清除缓存并重新构建项目，可以使用以下命令： ``` npm run clean npm run build ``` 希望以上方法能够帮助你解决问题！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值