electron-vue 开发问题合集
(一)Found ‘electron’ but not as a devDependency, pruning anyway
原因:对electron没有严格要求的话可以忽略,不影响打包,但会影响第三方库的使用,应使用推荐库进行打包。
修改 .electron-vue/webpack.renderer.config.js 文件
// let whiteListedModules = ['vue']
let whiteListedModules = ['vue', 'electron']
(二)Multispinner is not defined
原因:在 electron -vue 的模板中,没有引入 multispinner
相关的依赖,对 multispinner 依赖重新安装,并在 build.js 文件中加入引用。
命令行安装 multispinner
npm install multispinner -D
在 .electron-vue/build.js 文件中引入 multispinner
const Multispinner = require('multispinner')
(三)Build:Identifier 'tasks'has already been declared
原因:在 .electron-vue/build.js 中重复申明了tasks,导致在打包时报错,所以需要对其中至少一个tasks 进行重命名。
修改 .electron-vue/build.js 文件
// const tasks = ['main', 'renderer']
// const m = new Multispinner(tasks, { ...
const tasks1 = ['main', 'renderer']
const m = new Multispinner(tasks1, { ... // const tasks = new Listr( ...
// await tasks
const tasks2 = new Listr( ...
await tasks2
(四)electron-packager --打包命令的参数设置
"scripts": {
"package": "electron-packager ./ app --all --out ./out --electron-version 2.0.18 --overwrite --icon=./src/renderer/assets/images/icon"
} /**
*
* electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>
*
* 参数说明:
* sourcedir:项目所在路径
* appname:应用名称
* platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
* architecture:决定了使用 x86 还是 x64 还是两个架构都用
* electron version:electron 的版本
* optional options:可选选项
*
**/
打包成功如下:
根据配置在项目根目录下生成 CloudPrint 文件夹:
(五)自定义 ico 图标
注意:必须使用软件处理后生成的 .ico 文件,不能直接修改后缀名得到 .ico 文件(因为通过修改其他格式图片的后缀生成的 .icon 文件在打包时会报错!!!)。
(六)打包成功运行桌面应用白屏
修改 .electron-vue/webpack.renderer.config.js 文件
// nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false
nodeModules: path.resolve(__dirname, '../node_modules')
(七)打包时 resource busy or locked, rmdir 'D:\www\g******\***\***-win32-ia32'
原因:当前打包的项目有正在运行的已打包程序,确定关闭后重新打包 。打包时关闭正在运行的已打包程序。
(八)mac环境的包需要在Mac上进行打包!!!
(九)macOS“自动更新”必须要使用苹果开发者证书进行签名!!!
(十)npm run build:web 报错:can‘t resolve 'fs'
修改 webpack.web.config.js 文件
// target: 'electron-main'
// target: 'web'
target: 'electron-renderer'
(十一)实现点击任务栏图标显示/隐藏客户端
(十二)Linux环境命令行报错 `node ./postinstall.js`
// 解决方法:将electron下载地址指向taobao镜像 npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/" cnpm install
(十三)生产环境下启用应用程序的开发者工具
// 打开
mainWindow.webContents.openDevTools() // 分离状态打开
mainWindow.webContents.openDevTools({ mode: 'detach' }) // 在窗口左侧打开
mainWindow.webContents.openDevTools({ mode: 'left' }) // 在窗口右侧打开
mainWindow.webContents.openDevTools({ mode: 'right' }) // 在窗口底部打开
mainWindow.webContents.openDevTools({ mode: 'bottom' })
(十四)主进程对静态文件的访问
如下:主进程设置图标路径,需根据开发环境和生成环境的不同而不同。
要求:dev环境下添加icon.png至/src/renderer/assets/images ; pro环境下添加icon.png至/static 。
// main/index.js // 窗口、任务栏、托盘等图标的路径设置
icon: process.env.NODE_ENV === 'development' ? path.join(__dirname, '../renderer/assets/images/icon.png') : path.join(__static, './icon.png')
日常开发中不会将相同图片copy两次放不同位置,可通过build配置拷贝静态文件到所需位置。
修改 webpack.renderer.config.js 、webpack.web.config.js 文件
// .electron-vue/webpack.renderer.config.js 和 .electron-vue/webpack.web.config.js // if (process.env.NODE_ENV === 'production') {
// ...
//
// rendererConfig.plugins.push(
// ...
//
// new CopyWebpackPlugin([
// {
// from: path.join(__dirname, '../static'),
// to: path.join(__dirname, '../dist/electron/static'),
// ignore: ['.*']
// }
// ])
//
// ...
// )
// } if (process.env.NODE_ENV === 'production') {
... rendererConfig.plugins.push(
... new CopyWebpackPlugin([
{
from: path.join(__dirname, '../static'),
to: path.join(__dirname, '../dist/electron/static'),
ignore: ['.*']
},
{
from: path.join(__dirname, '../src/renderer/assets/images/icon.png'),
to: path.join(__dirname, '../dist/electron/static/icon.png')
}
]) ...
)
}
electron-vue 开发问题合集的更多相关文章
- 超全的 Vue 开源项目合集,签收一下
超全的 Vue 开源项目合集,签收一下 xiaoge2016 前端开发 1周前 作者:xiaoge2016 链接: https://my.oschina.net/u/3018050/blog/2049 ...
- win7win8 64位汇编开发环境合集安装与设置
win7win8 64位汇编开发环境合集安装与设置 下载 win7 win8 64位汇编开发环境.rar 下载地址(免积分下载) http://download.csdn.net/detail/li ...
- Electron+Vue开发跨平台桌面应用
Electron+Vue开发跨平台桌面应用 xiangzhihong发布于 2019-12-23 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某 ...
- vue指令示例合集
vue所有指令练习合集.这是个html文件,用chrome打开可查看结果. <!DOCTYPE html> <html lang="en" xmlns:v-on= ...
- 使用electron+vue开发一个跨平台todolist(便签)桌面应用
# 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些 ...
- VUE相关资料合集
===官方=== https://github.com/vuejs/vue vue-components组件库 ---PC端--- https://github.com/ElemeFE/element ...
- electron vue 开发客户端程序
文档知识点 https://electronjs.org/docs/tutorial/about (1)Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Ma ...
- php最好的开发工具合集
欲先攻其事必先利其器,新接触pphp的小伙伴们,你们可要注意阅读本文了哦! 常见好用的php开发工具汇总 1.SublimeText3 工具简介: Sublime Text是一款目前非常流行的代码编辑 ...
- Android辅助开发工具合集
https://github.com/389273716/android-skill-summary/blob/master/开发工具使用指南/辅助开发工具.md
随机推荐
- Git8.3k星,十万字Android主流开源框架源码解析,必须盘
为什么读源码 很多人一定和我一样的感受:源码在工作中有用吗?用处大吗?很长一段时间内我也有这样的疑问,认为哪些有事没事扯源码的人就是在装,只是为了提高他们的逼格而已. 那为什么我还要读源码呢?一刚开始 ...
- vue3.0安装
一 .vue3.0安装 vue3.0安装 个人推荐以下2种 (1). 开发工具的对应代码中 插入CDN <script src="https://unpkg.com/vue@next& ...
- 响应式编程基础教程:Spring Boot 与 Lettuce 整合
本文主要介绍响应式编程访问 Redis,以及 Spring Boot 与 Lettuce 的整合使用. Lettuce 是可扩展性线程安全的 Redis 客户端,用于同步.异步和响应式使用.如果多个线 ...
- char、signed char、unsigned char的区别总结。
转载地址:http://hi.baidu.com/thewillreigns/blog/item/67e665c4296e69c038db492d.html char 和 unsigned char是 ...
- MyBatis学习06(动态SQL和缓存)
10.动态SQL 10.1 什么是动态SQL 动态SQL指的是根据不同的查询条件 , 生成不同的Sql语句. 官网描述: MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或 ...
- 003 PCI Express体系结构(三)
一.PCI总线的存储器读写总线事务 总线的基本任务是实现数据传送,将一组数据从一个设备传送到另一个设备,当然总线也可以将一个设备的数据广播到多个设备.在处理器系统中,这些数据传送都要依赖一定的规则,P ...
- Liunx搭建Rlogin服务
实验环境为 centos7 第一步:安装服务:yum -y install rsh rsh-server xinetd 第二步:启动服务: systemctl restart rsh.sockets ...
- @Profile-根据不同环境注入bean
介绍 @Profile元注解是在不同的生产环境中,@Bean创建的SpringBean根据spring.profiles.active指定的环境不同创建不同环境的bean对象 一.@Profile元注 ...
- 如何在WPF中定义窗体模板
参考网址:https://www.cnblogs.com/chenxizhang/archive/2010/01/10/1643676.html可以在app.xaml中定义一个ControlTempl ...
- Redis5.0 配置文件中文参考
Redis 5.0 配置文件#是否在后台执行,yes:后台运行:no:不是后台运行daemonize yes#是否开启保护模式,默认开启.要是配置里没有指定bind和密码.开启该参数后,redis只会 ...