Electron-Vue 开发下 dev/prod/webpack server各种路径设置汇总
背景
在实际开发中,我发现团队对于这几个路径的设置上是纯靠猜的,通过一点点地尝试来找到可行的路径,这是不应该的,我们应该很清晰地了解这几个概念,以下通过截图和代码进行细节讲解。
npm run dev 下的路径如何处理?
-
我们要搞明白 npm run dev 在干什么?
-
这个过程使 webpack 启动了一个本地 http 服务,什么是 http 服务,就是你可以通过 url 的方式(http://loclahost:9080/xxxx) 来获取具体的资源文件,例如 http://localhost:9080/index.html 要获取 index.html 这个服务就会根据逻辑去提取 index.htm 数据并输出出去
-
上面的 index.html 是放在内存里面的,webpack 在 run dev 时,会先根据 webpack.xxxx.config.js 配置文件进行打包,但是这个打包结果并不放在硬盘上,而是放在内存里,最终也是要打包成 index.html + index.js(这个就是一堆源码打包的最终 js)
-
-
webpack dev server 这个 http 服务会同时监听源码入口引入的其他模块代码,只要这些代码有改变,那么 webpack 就会重新打包 index.js
-
例如__static 路径是在 webpack.xxxxx.config.js 进行配置的
-
这里要记得渲染进程和主进程是两个独立进程,它们分别都有自己的 webpack.xxxx.config.js 文件,因此两者的__static 设置的可能并不相同
npm run build 时的路径
-
npm run build 时是生产环境下的命令
-
生产会把代码都打包到 dist 路径下,后续运行的也不是 webpack dev server http 服务来启动,这时 index.html 下可以定义一些路径
-
因为渲染进程是以 src/index.ejs 作为 index.html 生成模板的,所以 index.ejs 最终打包的位置就是__dirname 的位置,如果你想找到 dist/electron/static 则是需要上翻 3 层,就到了 static,这样后续 index.js 使用全局_static 就能很方便地找到 static 路径了
-
如果你需要找 dist/ 的话,那需要上翻 4 层,以此类推
-
针对不同的渲染进程,你可以配置不同的模板,来定义自己的__static
webpack dev server 的 static 是啥?
-
这里的 static 并不是一个具体目录的名字,这是一个配置 key,这个 key 的意思是 dev server http 服务启动后,除了从打包根路径 dist/electron/renderer/pages/main/ 访问 index.html 和 index.js 文件外,当访问一张图片时,dev server 服务去哪里找呢?我们从下面的这个配置就知道是项目根目录下找,这里是个数组,你可以配置多个资源文件路径,也即意味着可以在多个目录下找资源文件
-
这里的意思是当你访问/static/imgs/logo.png,那就是从根目录下访问这个 logo.png,生产环境
-
下面就是__static 就是绝对路径, dev 环境下 http://localhost:9080/static/imgs/logo.png
-
对于 vue 文件中直接访问的图片 如 img src=“../../logo.png”,这个 webpack 并不处理,因为它不知道怎么处理,dev 环境下就是根据配置的资源文件路径下找,但是 prod 环境下,就靠你拷贝具体的资源文件夹到何时的路径了
-
file-loader/url-loader 主要是处理哪些显式引入的,且能正确定位位置的资源文件,将其选择是否 base64 集成或者迁移到打包后的文件下的 imgs/* 下
preload.js 和 inject.js 文件的引入
-
你不能引用源码的入口文件 index.js,原因是源码的入口文件还没有打包呢,你引进这个源码 index.js 就是引入 index.js,不是把所有 index.js 引入的其他代码都引入了(没有任何机制在帮你做这件事)
-
你可以用 webpack dev server 起一个服务,来单独打包这个 js,然后对外输出,你就可以引入 localhost:9080/preload.js,这样是否支持热更,不得而知
-
-
因此,你必须直接引打包完成的 dist/electron/preload/web/whatsapp/preload.js 这个文件,这个文件是整合好的,引入就全引入了
相关文章:
Electron-Vue 开发下 dev/prod/webpack server各种路径设置汇总
背景 在实际开发中,我发现团队对于这几个路径的设置上是纯靠猜的,通过一点点地尝试来找到可行的路径,这是不应该的,我们应该很清晰地了解这几个概念,以下通过截图和代码进行细节讲解。 npm run dev 下的路径如何处理&…...
穷举vs暴搜vs深搜vs回溯vs剪枝专题一>全排列II
题目: 解析: 这题设计递归函数,主要把看如何剪枝 代码: class Solution {private List<List<Integer>> ret;private List<Integer> path;private boolean[] check;public List<List<Integer>> p…...
Nginx中Server块配置的详细解析
Nginx中Server块配置的详细解析 一、Server块简介 在Nginx配置文件中,server块是非常关键的部分。它用于定义虚拟主机,一个server块就代表一个虚拟主机。这使得我们可以在一台Nginx服务器上通过不同的配置来处理多个域名或者基于不同端口的服务请求。 …...
【后端面试总结】Redis的三种模式原理介绍及优缺点
Redis作为一款高性能的键值对数据库,提供了多种模式以满足不同场景下的需求。本文将详细介绍Redis的三种主要模式:主从复制模式、哨兵模式(Sentinel)和集群模式(Cluster),包括它们的原理、配置、…...
TCP协议详解
目录 一. TCP协议概述 1. 概念 2. 特点 (1) 面向连接 (2) 可靠传输 (3) 面向字节流 (4) 全双工通信 (5) 流量控制和拥塞控制 二. TCP协议报文格式 1. 源端口号 和 目的端口号 (16位) 2. 序号 和 确认序号 (32位) 3. 首部长度 (4位) 4. 保留位 (6位) 7. 控制位 8.…...
Webpack学习笔记(2)
1.什么是loader? 上图是Webpack打包简易流程,webpack本身只能理解js和json这样的文件,loader可以让webpack解析其他类型文件,并且将文件转换成模块供我们使用。 test识别出那些文件被转换,use定义转换时使用哪个loader转换 上图…...
【漏洞复现】Grafana 安全漏洞(CVE-2024-9264)
🏘️个人主页: 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 一、漏洞概述 1.1漏洞简介 漏洞名称:Grafana 安全漏洞 (CVE-2024-9264)漏洞编号:CVE-2024-9264 | CNNVD-202410-1891漏洞类型:命令注入、本地文件包含漏洞威胁等级:…...
C++实现最大字段和
又是一道非常基础且经典的动态规划题目:假设有一个整数序列,我们将连续的几个元素组成的序列称为子段,要求我们得出所有子段和中最大的一个~ 例如:{-2,11,-4,13,-5,-2},这一序列中&a…...
当我用影刀AI Power做了一个旅游攻略小助手
在线体验地址:旅游攻略小助手https://power.yingdao.com/assistant/ca1dfe1c-9451-450e-a5f1-d270e938a3ad/share 运行效果图展示: 话不多说一起看下效果图: 智能体的截图: 工作流截图: 搭建逻辑: 其实这…...
K8s HPA的常用功能介绍
Kubernetes 的 Horizontal Pod Autoscaler (HPA) 是一种自动扩展功能,用于根据资源使用情况(如 CPU、内存等)或自定义指标,动态调整 Pod 的副本数量,从而保证应用的性能和资源利用率。 以下是 HPA 的常用功能介绍&…...
web3跨链预言机协议-BandProtocol
项目简介 Band Protocol 项目最初于 2017年成立并建立在 ETH 之上。后于2020年转移到了 Cosmos 网络上,基于 Cosmos SDK 搭建了一条 Band Chain 。这是一条 oracle-specific chain,主要功能是提供跨链预言机服务。Cosmos生态上第一个,也是目…...
Python如何正确解决reCaptcha验证码(9)
前言 本文是该专栏的第73篇,后面会持续分享python爬虫干货知识,记得关注。 我们在处理某些国内外平台项目的时候,相信很多同学或多或少都见过,如下图所示的reCaptcha验证码。 而本文,笔者将重点来介绍在实战项目中,遇到上述中的“reCaptcha验证码”,如何正确去处理并解…...
电商数据采集电商,行业数据分析,平台数据获取|稳定的API接口数据
电商数据采集可以通过多种方式完成,其中包括人工采集、使用电商平台提供的API接口、以及利用爬虫技术等自动化工具。以下是一些常用的电商数据采集方法: 人工采集:人工采集主要是通过基本的“复制粘贴”的方式在电商平台上进行数据的收集&am…...
【java】Executor框架的组成部分
目录 1. 任务(Task)2. 执行器(Executor)3. 任务结果(Future)4. 线程池(ThreadPool)5. 任务队列(Work Queue)6. 线程工厂(Thread Factoryÿ…...
KMP算法基础
文章一览 前言一、核心思想二、实现步骤三、图解实现四、next数组的实现总结 前言 本栏目将讲解在学习过程中遇到的各种常用算法,深入浅出的讲解算法的用法与使用场景。 那么话不多说,让我们进入第一个算法KMP算法吧! 一、核心思想 KMP&am…...
C语言——实现百分制换算为等级分
问题描述:百分制换算为等级分 //百分制换算为等级分#include<stdio.h>void my_function(int x) {if(x>95 && x<100){printf("A");}else if(x>81 && x<94){printf("B");}else if(x>70 && x<8…...
@pytest.fixture() 跟 @pytest.fixture有区别吗?
在iOS UI 自动化工程里面最早我用的是pytest.fixture(),因为在pycharm中联想出来的fixture是带()的,后来偶然一次我没有带()发现也没有问题,于是详细查了一下pytest.fixture() 和 pytest.fixtur…...
docker run命令大全
docker run命令大全 基本语法常用选项基础选项资源限制网络配置存储卷和挂载环境变量重启策略其他高级选项示例总结docker run 命令是 Docker 中最常用和强大的命令之一,用于创建并启动一个新的容器。该命令支持多种选项和参数,可以满足各种使用场景的需求。以下是 docker ru…...
BootAnimation源码流程分析
BootAnimation流程 bootanimation源码位于frameworks/base/cmds/bootanimation,正如其名,主要功能是加载播放开机动画,是一个C程序,编译生成的可执行文件位于/system/bin 主要逻辑:解析系统路径下的bootanimation.zi…...
Vue前端开发-数据缓存
完成全局性的axios实例对象配置后,则可以在任意一个组件中直接调用这个对象,发送异步请求,获取服务端返回的数据,同时,针对那些不经常变化的数据,可以在请求过程中,进行数据缓存,并根…...
唯品会Android面试题及参考答案
HTTP 和 HTTPS 的区别是什么?你的项目使用的是 HTTP 还是 HTTPS? HTTP 和 HTTPS 主要有以下区别。 首先是安全性。HTTP 是超文本传输协议,数据传输是明文的,这意味着在数据传输过程中,信息很容易被窃取或者篡改。比如&…...
ARM CCA机密计算安全模型之固件启动
安全之安全(security)博客目录导读 目录 1、安全启动(Verified boot) 2、镜像格式和签名方案 3、防回滚 4、离线启动(Off-line boot) 5、CCA HES固件启动流程 6、CCA系统安全域启动过程 7、应用程序PE启动过程 8、稳健性 本节定义了将CCA固件引导至可证明状态的要…...
LeetCode:3376. 破解锁的最少时间 I(DFS回溯 Java)
目录 3376. 破解锁的最少时间 I 题目描述: 实现代码与解析: DFS 原理思路: 3376. 破解锁的最少时间 I 题目描述: Bob 被困在了一个地窖里,他需要破解 n 个锁才能逃出地窖,每一个锁都需要一定的 能量 …...
利用编程获得money?
在当今数字化时代,编程技能为人们开辟了众多赚钱途径。无论你是编程新手还是经验丰富的开发者,都能在广阔的市场中找到适合自己的盈利方式。以下是一份详细的用编程赚钱指南。 一、自由职业平台 像 Upwork、Freelancer 和 Fiverr 等知名自由职业平台&am…...
51c视觉~合集36
我自己的原文哦~ https://blog.51cto.com/whaosoft/12275223 #无监督盲超分算法MLMC 即插即用的解决方案 本文介绍了一种新的无监督盲超分辨率算法MLMC,该算法结合了元学习和马尔可夫链蒙特卡罗核估计,无需监督预训练或参数先验,即可实现…...
域名系统_域名展示出售系统 PC+H5 双端自适应页面
域名系统_域名展示出售系统 PCH5 双端自适应页面 PCH5 双端自适应页面 " 是一套专门用于域名展示和出售的系统源代码 它包含 PC 端和 H5 移动端两个版本,确保在不同设备上都能提供良好的用户体验 这套系统不仅具备基本的域名展示功能,还注重设计…...
Linux C/C++编程的线程结束
【图书推荐】《Linux C与C一线开发实践(第2版)》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践(第2版)(Linux技术丛书)》(朱文伟,李建英)【摘要 书评 试读】- 京东图书 (jd.com…...
户口本识别、接口识别、python户口本文字识别集成
文字识别技术是数字化转型中一项重要的信息处理手段,正在改变政府机构、企业及个人用户之间的交互方式。通过先进的OCR(光学字符识别)技术和AI算法的支持,户口本识别不仅简化了信息采集流程,还提高了数据的准确性。 随…...
王佩丰24节Excel学习笔记——第十一讲:Vlookup函数
【以 Excel2010 系列学习,用 Office LTSC 专业增强版 2021 实践】 【本章小技巧】 掌握vlookup使用方法,选区的第一列一定是查询参数条件一。使用通配符查询。vlookup 限 255 位长度。掌握日常使用场景。使用vlookup模糊匹配查询个税 一、使用Vlookup函…...
java全栈day16--Web后端实战(数据库)
一、数据库介绍 二、Mysql安装(自行在网上找,教程简单) 安装好了进行Mysql连接 连接语法:winr输入cmd,在命令行中再输入mysql -uroot -p密码 方法二:winr输入cmd,在命令行中再输入mysql -uroo…...
Upload-labs 靶场(通关攻略)
WebShell 一句话木马: <?php eval($_POST[a])?> <?php system($_POST[a])?> 第一关(删除前端js校验) 删除return checkFile() 就能上传成功 第二关(抓包文件类型校验) BP抓包修改后缀 改为2.php后放行 第三关(上传php同种类型的不…...
【爬虫一】python爬虫基础合集一
【爬虫一】python爬虫基础合集一 1. 网络请求了解1.1. 请求的类型1.2. 网络请求协议1.3. 网络请求过程简单图解1.4. 网络请求Headers(其中的关键字释义):请求头、响应头 2. 网络爬虫的基本工作节点2.1. 了解简单网络请求获取响应数据的过程所涉及要点 1. 网络请求了…...
TRELLIS,一键生成3D模型,图像转3D,微软开源
大家好!今天给大家分享微软最近开源的一个3D模型生成项目——TRELLIS。简单来说就是输入一张图片,它就能自动帮你生成3D模型。这与之前分享的TripoSR项目类似,但是精度和贴图细节比TripoSR要高很多。 好久没关注AI生成3D模型这块,…...
【JavaEE进阶】关于Maven
目录 🌴什么是Maven 🌲为什么要学Maven 🎍创建一个Maven项目 🎄Maven核心功能 🚩项目构建 🚩依赖管理 🎋Maven Help插件 🍀Maven 仓库 🚩本地仓库 Ὢ…...
泷羽sec学习打卡-powershell的灵魂
声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于powshell的那些事儿-玩转powershell 什么是powershell?什么是cmd?powershel…...
利用Map集合设计程序,存储城市和对应等级相关信息
package testmap;import java.util.HashMap; import java.util.Scanner; import java.util.Set;public class TestHashMap6 {public static void main(String[] args) {//1.创建一个Map集合:存储键值对HashMap<String, String> map new HashMap<>();/…...
【数字图像处理】期末综合知识点总结 ver1,灰度图像,图像增强,平滑滤波,锐化滤波,图像复原,图像压缩
关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…...
GIN
gin是什么 Gin 是一个用 Go (Golang) 编写的 HTTP Web 框架。 它具有类似 Martini 的 API,但性能比 Martini 快 40 倍。如果你需要极好的性能,使用 Gin 吧。 特点:gin是golang的net/http库封装的web框架,api友好,注…...
Java中通过ArrayList扩展数组
在Java中,ArrayList 是一个动态数组实现,能够根据需要自动调整其大小。与传统的数组不同,ArrayList 不需要预先指定大小,并且提供了许多方便的方法来操作集合中的元素。下面将详细介绍如何使用 ArrayList 进行数组的扩展ÿ…...
2024.12.19总结
今天跑了数据采集和端口扫描,对于容器化和虚拟机的概念不是很理解。然后是北向接口文档,在跟其他人交流时,问原理把我给问住了。在安全这块,要学的的东西很多,确实不是三五个月就能搞定的事。 如今,我要做…...
upload-labs靶场通过攻略
upload-labs靶场 第一关 删除前端js校验 return checkFile() 就能上传成功 第二关(抓包文件类型校验) BP抓包修改后缀 第三关(上传php同种类型的不同后缀) 根据源码发现这关的黑名单不太严谨,我们就可以使用php同种类型的不同后缀 第四关(双上传) 根据源码发现这些后缀的…...
【信息系统项目管理师-论文真题】2017下半年论文详解(包括解题思路和写作要点)
更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 试题一:论信息系统项目的安全管理写作要点解题思路1、访问控制工具与技术2、加密技术3、安全检测与监控工具4、安全策略制定与文档化:5、数据备份与恢复技术试题二:论信息系统项目的成本管理写作要点解题思路…...
运维 mysql、redis 、RocketMQ性能排查
MySQL查看数据库连接数 1. SHOW STATUS命令-查询当前的连接数 MySQL 提供了一个 SHOW STATUS 命令,可以用来查看服务器的状态信息,包括当前的连接数。 SHOW STATUS LIKE Threads_connected;这个命令会返回当前连接到服务器的线程数,即当前…...
使用 rvest 包快速抓取网页数据:从入门到精通
介绍 随着大数据和数据科学的迅速发展,互联网数据的抓取已经成为重要的信息获取手段之一。网页抓取(Web Scraping)可以帮助我们自动化地从网页中提取有价值的数据,应用广泛,包括新闻热点分析、金融数据采集等。在本篇…...
青少年编程与数学 02-004 Go语言Web编程 01课题、Web应用程序
青少年编程与数学 02-004 Go语言Web编程 01课题、Web应用程序 课题摘要:一、Web应用程序二、Web服务器(一)什么是Web服务器(二)Web服务器配置1. 选择服务器软件2. 安装服务器软件3. 配置服务器4. 安全设置5. 部署网站内容6. 测试服…...
MybatisPlus(四)
五、条件构造器和常用接口 1、wapper介绍 Wrapper : 条件构造抽象类,最顶端父类 AbstractWrapper : 用于查询条件封装,生成 sql 的 where 条件 QueryWrapper : 查询条件封装 UpdateWrapper : Update 条件封…...
经典电荷泵/Charge pump——1998.JSSC
电路结构 工作原理 M3 and M4 are the series switches, and M5, M6 switch to the highest voltage. If M5 and M6 are missing, having a large capacitor is of absolute necessity, because must always stay between 2 Vin and 2Vin - Uj to avoid switching on the vert…...
搭建MongoDB
title: 搭建MongoDB date: 2024-11-30 23:30:00 categories: - 服务器 tags: - MongoDB - 大数据搭建MongoDB 环境:Centos 7-2009 1. 创建MongoDB的国内yum源 # 下载Centos7对应最新版7.0.15的安装包 cat >> /etc/yum.repos.d/mongodb.repo << &quo…...
2FA双因子验证技术实现原理
一、背景 随着关注数据安全的意识逐步提升,很多站点都开始强制用户不止使用用户名密码的形式进行登录,还会逐步引导用户开启2FA多因子验证。 Github就已经强制用户使用2FA多因子验证进行账号的登录,现在阿里云、腾讯云等也逐步往这个方向发展…...
boost之bind
简介 用于构造函数对象,其定义在文件bind.hpp中 bind 其底层使用通用的模板类bind_t template<class R, class F, class L> class bind_t { public:typedef bind_t this_type;bind_t(F f, L const & l): f_(f), l_(l) {}#define BOOST_BIND_RETURN re…...