Electron-Vue 脚手架避坑实录,兼容Win11,升级electron22,清理控制台错误

去年的还是有用的,大家继续看,今年再补充一些
Electron-Vue 异常处理方案 M1 和 Window10_electron异常处理-CSDN博客

 代码gitee.com地址

electron-demo: electron 22 初始代码开发和讲解

升级electron为22版本(这个版本承上启下,比较好用,建议使用)package.json和package-lock.json

{
  "name": "electron-demo",
  "version": "0.0.1",
  "author": "wangsen <wangsen@zingfront.com>",
  "description": "An electron Demo",
  "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",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
    "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": "npm run lint:fix"
  },
  "build": {
    "productName": "electron-demo",
    "appId": "e-demo",
    "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"
    },
    "linux": {
      "icon": "build/icons"
    }
  },
  "dependencies": {
    "@electron/remote": "2.0.1",
    "axios": "1.6.8",
    "vue": "^2.6.11",
    "vue-electron": "^1.0.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-electron": "1.0.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.6",
    "@types/color": "3.0.0",
    "@types/color-convert": "^1.9.0",
    "@types/lodash": "4.14.144",
    "@types/node": "12.12.54",
    "ajv": "^6.5.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-minify-webpack-plugin": "^0.3.1",
    "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",
    "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": "22.3.18",
    "electron-builder": "22.10.5",
    "electron-debug": "^1.5.0",
    "electron-devtools-installer": "3.2.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "listr": "^0.14.3",
    "mini-css-extract-plugin": "0.4.0",
    "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": "4.28.3",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
  }
}

增加.npmrc electron和electron-builder镜像,不然安装包能让你装到怀疑人生

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

 npm可以设置代理,如果不会的,请自行搜索,这里就细讲了,有时候代理也不行就需要,在控制台,设置环境,不加这个,也能让你下载安装包下到怀疑人生,实在搞不了安装包问题的,可以私信我发node-modules

set http_proxy=http://127.0.0.1:7890 & set https_proxy=http://127.0.0.1:7890

vuex-electron 引用低版本的"electron-store": "^2.0.0",导致electron.remote报错,使得开启欢迎界面都打不开

得跑到node-modules下改写一下electron-store,还得安装@electron/remote这个包

'use strict';
const path = require('path');
const Conf = require('conf');

const moduleSource = process.type === 'browser' ? require('electron') : require('@electron/remote');
const { app, shell } = moduleSource;

class ElectronStore extends Conf {
    constructor(opts) {
        const defaultCwd = app.getPath('userData');

        opts = Object.assign({name: 'config'}, opts);

        if (opts.cwd) {
            opts.cwd = path.isAbsolute(opts.cwd) ? opts.cwd : path.join(defaultCwd, opts.cwd);
        } else {
            opts.cwd = defaultCwd;
        }

        opts.configName = opts.name;
        delete opts.name;
        super(opts);
    }

    openInEditor() {
        shell.openItem(this.path);
    }
}

module.exports = ElectronStore;

 改node-modules是不对的,但是先凑合启动起来再说

启动时,你会发现它非得安装一个vue-devtool插件,而且还是个manifest:2版本,最新的已经是manifest:3版本了,可以自己把安装包下载下来,但是这个会造成sandbox 环境报错,我觉得没啥用直接给注释了

另外 这个包也要升级,否则载入不正确

"electron-devtools-installer": "3.2.0"

插件的位置在,不过这里告诉了你怎么给渲染进程加插件的方法,windows想快速找这个路径,用everything搜索

C:\Users\senzo\AppData\Roaming\Electron\extensions\nhdogjmejiglipccpnnnanhbledajbpd

还有个热更新报错,这个去年已经讲了,这里就不再赘述,改了即可

另外就是electron 22版本,安全性加了很多,渲染进程默认不能调用electron api,必须开启contextIsolation:false,这个设置在webview中也有很大作用,这里不赘述

此外,上面说的那个@electron/remote库的使用,也必须将远程开起来,不然这个库无法使用

 主进程再配三段代码,才能在渲染进程中使用,这样看vuex-electron还是挺好的,这样主进程的数据变动,就可以影响所有的渲染进程了,以后还是可以探索探索的

最后再说一个,打开devtools,如果默认有菜单的话,就是不自动展开,必须把菜单关掉,才能每次dev时都打开

electron 这东西文档乱七八糟,版本迭代飞快,里面技术还多得不得了,但强大是真的强大,好用是真的好用,头疼是真的头疼,搞不好就内存泄漏了,问题多多,踩坑多多,后期我把代码整理号了,发到gitee上,再追加上来

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/608822.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

内网穿透速度慢

内网穿透速度慢原因及优化策略 在计算机网络应用中&#xff0c;内网穿透是一个常见的需求&#xff0c;它允许外部网络访问位于内部网络&#xff08;如企业局域网或家庭网络&#xff09;中的设备或服务。然而&#xff0c;有时用户在进行内网穿透时会遇到速度慢的问题&#xff0…

【二次元MMORPG游戏开发】任务系统技术拆解

引言 各位同学大家好。在今天的分享当中&#xff0c;我将对任务系统去做一个拆解。也许你见过很多任务系统&#xff0c;但是今天我要分享的是我们经过一个框架迭代以后的任务系统。我会结合客户端的功能演示给大家去讲解。 跟着演示学开发 基本操作 好&#xff0c;首先我们点…

C++ | Leetcode C++题解之第80题删除有序数组中的重复项II

题目&#xff1a; 题解&#xff1a; class Solution { public:int removeDuplicates(vector<int>& nums) {int n nums.size();if (n < 2) {return n;}int slow 2, fast 2;while (fast < n) {if (nums[slow - 2] ! nums[fast]) {nums[slow] nums[fast];slo…

【Linux】项目自动化构建工具make/makefile

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解Linux中项目自动化构建工具make/makefile的相关内容。 如果看到最后…

[windows系统安装/重装系统][step-2]BIOS设置UEFI引导、磁盘分区GPT分区、安装系统[含完整操作拍照图片]

背景 先准备U盘启动盘和系统镜像: [windows系统安装/重装系统][step-1]U盘启动盘制作&#xff0c;微软官方纯净系统镜像下载 前言&#xff08;略长&#xff0c;建议可跳过&#xff09; 我的笔记本升级了CPU升级了内存后出现了一个小问题&#xff0c; 每次启动徽标显示后会…

hyper-v启动centos7虚拟机不能联网

虚拟网卡要和之前虚拟机里面设置的GATEWAY一致。 安装CentOS遇到Error setting up base repository换url 或者换镜像包iso(这个有用&#xff09; 没掌握摸Yu的精髓 好累啊

安全加固

目录 1.文件锁定管理 2.设置用户账户有效期 3.查看并清除命令历史记录 4.设置用户超时登出时间 5.用户切换 6.用户提权 7.禁用重启热键CtrlAltDel 8.设置单用户模式密码 9.调整BIOS引导设置 10.禁止root用户从本地登录&#xff1a; 11.禁止root用户通过ss…

【算法刨析】完全背包

完全背包与01背包的区别 01背包对于一个物品只能选择一次&#xff0c;但是完全背包可以选择任意次&#xff1b; 思路 和01背包类似&#xff0c;01背包我们只需要判断选或不选&#xff0c;完全背包也是如此&#xff0c;不同的是&#xff0c;对于这个物品我们在判断选后在增加一…

【考试100】2023年监理《目标控制(土建)》真题及答案精选

​来源&#xff1a;考试100 一、单项选择题 1、工程建设与使用中&#xff0c;保证人身和环境免受危害&#xff0c;是建设工程质量特性中的&#xff08; &#xff09;要求。A .适用性 B .耐久性 C .安全性 D .可靠性 参考答案&#xff1a;C 解析&#xff1a;安全性&…

2024 全自动ai生成视频MoneyPrinterTurbo源码

只需提供一个视频 主题 或 关键词 &#xff0c;就可以全自动生成视频文案、视频素材、视频字幕、视频背景音乐&#xff0c;然后合成一个高清的短视频。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89208288 更多资源下载&#xff1a;关注我。

AGV与智能仓储系统集成的实践与优化

agv 根据相关研究报告指出&#xff0c;储存、装卸、等待及运送等程序&#xff0c;几乎占了整个生产制程95%的时间&#xff0c;因此导致工厂中的再制品及物料无法有效降低&#xff0c;耗损大量人工等问题&#xff0c;早已是制造业者在经营上的痛点。而智慧工厂中的AGV无人搬运车…

Gitee 码云与Git 交互

优质博文&#xff1a;IT-BLOG-CN 一、进入码云官方网站&#xff0c;注册用户 码云(Gitee.com)是一个类似于GitHub的在线代码托管平台。 码云提供了包括版本控制、代码托管、协作开发和代码分享等功能&#xff0c;基于Git开发&#xff0c;支持代码在线查看、历史版本查看、Fo…

《系统架构设计师教程(第2版)》第10章-软件架构的演化和维护-06-大型网站系统架构演化实例

文章目录 第一阶段&#xff1a;单体架构第二阶段&#xff1a;垂直架构第三阶段&#xff1a;使用缓存改善网站性能第四阶段&#xff1a;使用服务集群改善网站并发处理能力第五阶段&#xff1a;数据库读写分离第六阶段&#xff1a;使用反向代理和CDN加速网站响应第七阶段&#xf…

CommandLineRunner和ApplicationRunner接口实现类中run方法发生异常导致spring程序关闭

今天其他组的一个程序在k8s中启动报错&#xff0c;启动之后立马就关闭了。我去看日志&#xff0c;发现最后面报了一个UnknownHostException异常&#xff0c;感觉是这个原因导致的&#xff0c;然后查看异常栈。定位到一个CommandLineRunner接口实现类&#xff0c;这个实现类里面…

乡村振兴的文化旅游融合:整合乡村文化资源与旅游资源,发展文化旅游产业,提升美丽乡村的文化内涵和旅游吸引力

一、引言 随着城市化进程的加速和人们精神文化需求的日益增长&#xff0c;乡村旅游逐渐成为旅游市场的新热点。乡村振兴战略的提出&#xff0c;为乡村旅游的发展提供了新的契机。在这一背景下&#xff0c;如何整合乡村文化资源与旅游资源&#xff0c;发展文化旅游产业&#xf…

搜维尔科技:光学动作捕捉系统用于城市公共安全智慧感知实验室

用户名称&#xff1a;西安科技大学 主要产品&#xff1a;Optitrack Priime41 光学动作捕捉系统&#xff08;8头&#xff09; 在6米8米的空间内&#xff0c;通过8个Optitrack Priime41光学动作捕捉镜头&#xff0c;对人体动作进行捕捉&#xff0c;得到用户想要的人体三维空间坐…

synchronized关键字和ReentrantLock锁区别

synchronized关键字和ReentrantLock锁是Java中用于同步的两个重要机制&#xff0c;它们在很多方面有所不同&#xff1a; 1. **锁定范围**: synchronized关键字只能在方法的执行过程中提供锁定&#xff0c;而ReentrantLock可以锁定任何对象&#xff0c;包括方法、代码块和对象。…

认养小游戏功能介绍

认养小游戏通常模拟了真实的农业生产过程&#xff0c;让玩家能够在线上体验种植、养殖的乐趣。以下是一些常见的认养小游戏功能介绍&#xff1a; 选择认养的农产品&#xff1a;首先&#xff0c;玩家可以从游戏中提供的多种农产品中选择自己想要认养的种类&#xff0c;如蔬菜、…

容器化Jenkins远程发布java应用(方式二:自定义镜像仓库远程拉取构建)

1.创建maven项目 2.配置git、maven 3.阿里控制台>容器镜像服务>镜像仓库>创建镜像仓库 4.执行shell脚本&#xff08;推送镜像到阿里云镜像仓库&#xff09; 使用到登录阿里云仓库命令 #!/bin/bash # 服务名称 SERVER_NAMEplanetflix-app # 镜像tag IMAGE_TAG1.0.0-SN…

JavaWeb之过滤器(Filter)与监听器(Listener)

前言 过滤器(Filter) 1.什么是过滤器 2.过滤器的语法格式 3.使用场景 3.1.如何防止用户未登录就执行后续操作 3.2.设置编码方式--统一设置编码 3.3.加密解密(密码的加密和解密) 3.4.非法文字筛选 3.5.下载资源的限制 监听器(Listener) 1.什么是监听器 2.监听器分类…