当前位置： 首页 > news >正文

Electron-Vue 开发下 dev/prod/webpack server各种路径设置汇总

news 2025/12/23 18:53:35

背景

在实际开发中，我发现团队对于这几个路径的设置上是纯靠猜的，通过一点点地尝试来找到可行的路径，这是不应该的，我们应该很清晰地了解这几个概念，以下通过截图和代码进行细节讲解。

npm run dev 下的路径如何处理？

  1. 我们要搞明白 npm run dev 在干什么？

    1. 这个过程使 webpack 启动了一个本地 http 服务，什么是 http 服务，就是你可以通过 url 的方式（http://loclahost:9080/xxxx） 来获取具体的资源文件，例如 http://localhost:9080/index.html 要获取 index.html 这个服务就会根据逻辑去提取 index.htm 数据并输出出去

    2. 上面的 index.html 是放在内存里面的，webpack 在 run dev 时，会先根据 webpack.xxxx.config.js 配置文件进行打包，但是这个打包结果并不放在硬盘上，而是放在内存里，最终也是要打包成 index.html + index.js（这个就是一堆源码打包的最终 js）

  1. webpack dev server 这个 http 服务会同时监听源码入口引入的其他模块代码，只要这些代码有改变，那么 webpack 就会重新打包 index.js

  1. 例如__static 路径是在 webpack.xxxxx.config.js 进行配置的

  1. 这里要记得渲染进程和主进程是两个独立进程，它们分别都有自己的 webpack.xxxx.config.js 文件，因此两者的__static 设置的可能并不相同

npm run build 时的路径

  1. npm run build 时是生产环境下的命令

  2. 生产会把代码都打包到 dist 路径下，后续运行的也不是 webpack dev server http 服务来启动，这时 index.html 下可以定义一些路径

  1. 因为渲染进程是以 src/index.ejs 作为 index.html 生成模板的，所以 index.ejs 最终打包的位置就是__dirname 的位置，如果你想找到 dist/electron/static 则是需要上翻 3 层，就到了 static，这样后续 index.js 使用全局_static 就能很方便地找到 static 路径了

  2. 如果你需要找 dist/ 的话，那需要上翻 4 层，以此类推

  1. 针对不同的渲染进程，你可以配置不同的模板，来定义自己的__static

webpack dev server 的 static 是啥？

  1. 这里的 static 并不是一个具体目录的名字，这是一个配置 key，这个 key 的意思是 dev server http 服务启动后，除了从打包根路径 dist/electron/renderer/pages/main/ 访问 index.html 和 index.js 文件外，当访问一张图片时，dev server 服务去哪里找呢？我们从下面的这个配置就知道是项目根目录下找，这里是个数组，你可以配置多个资源文件路径，也即意味着可以在多个目录下找资源文件

  2. 这里的意思是当你访问/static/imgs/logo.png，那就是从根目录下访问这个 logo.png,生产环境

  1. 下面就是__static 就是绝对路径， dev 环境下 http://localhost:9080/static/imgs/logo.png

  2. 对于 vue 文件中直接访问的图片 如 img src=“../../logo.png”，这个 webpack 并不处理，因为它不知道怎么处理，dev 环境下就是根据配置的资源文件路径下找，但是 prod 环境下，就靠你拷贝具体的资源文件夹到何时的路径了

  3. file-loader/url-loader 主要是处理哪些显式引入的，且能正确定位位置的资源文件，将其选择是否 base64 集成或者迁移到打包后的文件下的 imgs/* 下

preload.js 和 inject.js 文件的引入

  1. 你不能引用源码的入口文件 index.js，原因是源码的入口文件还没有打包呢，你引进这个源码 index.js 就是引入 index.js，不是把所有 index.js 引入的其他代码都引入了（没有任何机制在帮你做这件事）

    1. 你可以用 webpack dev server 起一个服务，来单独打包这个 js，然后对外输出，你就可以引入 localhost:9080/preload.js，这样是否支持热更，不得而知

  2. 因此，你必须直接引打包完成的 dist/electron/preload/web/whatsapp/preload.js 这个文件，这个文件是整合好的，引入就全引入了

相关文章：

Electron-Vue 开发下 dev/prod/webpack server各种路径设置汇总

背景 在实际开发中，我发现团队对于这几个路径的设置上是纯靠猜的，通过一点点地尝试来找到可行的路径，这是不应该的，我们应该很清晰地了解这几个概念，以下通过截图和代码进行细节讲解。 npm run dev 下的路径如何处理&…...

编程日记 2024/12/20 14:39:37

Vue.js前端框架教程9：Vue插槽slot用法

文章目录 插槽（Slots）无名插槽（默认插槽）具名插槽reference 插槽使用 v-slot 的缩写语法 插槽（Slots） 在 Vue 中，插槽（Slots）是一种组件内容分发的机制，允许…...

编程日记 2024/12/20 14:38:35

初学stm32 --- NVIC中断

目录 STM32 NVIC 中断优先级管理 NVIC_Type: ISER[8]： ICER[8]： ISPR[8]： ICPR[8]： IABR[8]： IP[240]： STM32 的中断分组： 中断优先级分组函数 NVIC_PriorityGroupConfig 中断初始化函…...

编程日记 2024/12/20 14:37:34

Jest 入门指南：从零开始编写 JavaScript 单元测试

前言 在前端开发中，单元测试已经成为确保代码质量和稳定性的关键步骤。Jest 作为由 Facebook 开发和维护的功能强大的 JavaScript 测试框架，以其易于配置、丰富的功能和开箱即用的特性，成为众多开发者的首选工具。本文旨在引导你从零开始&am…...

编程日记 2024/12/20 14:36:33

【Java Web】Axios实现前后端数据异步交互

目录 一、Promise概述 二、Promise基本用法 三、async和await关键字 四、Axios介绍 4.1 Axios基本用法 4.2 Axios简化用法之get和post方法 五、Axios拦截器 六、跨域问题处理 一、Promise概述 axios是代替原生的ajax实现前后端数据交互的一套新解决方案，而…...

编程日记 2024/12/20 14:33:30

React 第十七节 useMemo用法详解

概述 useMemo 是React 中的一个HOOK，用于根据依赖在每次渲染时候缓存计算结果； 大白话就是，只有依赖项发生变化时候，才会重新渲染为新计算的值，否则就还是取原来的值，有点类似 vue 中的 computed 计算属性…...

编程日记 2024/12/20 14:31:26

鸿蒙项目云捐助第十五讲云数据库的初步使用

鸿蒙项目云捐助第十五讲云数据库的初步使用 在华为云技术使用中，前面使用了云函数，接下来看一下华为云技术中的另外一个技术云数据库的使用。 一、云数据库的创建 这里使用华为云数据库也需要登录到AppGallery Connect平台中，点击进入到之…...

编程日记 2024/12/20 14:28:24

如何构建一个可信的联邦RAG系统。

今天给大家分享一篇论文。 题目是：C-RAG：如何构建一个可信的联邦检索RAG系统。 论文链接:https://arxiv.org/abs/2412.13163 论文概述 尽管大型语言模型 (LLM) 在各种应用中展现出令人印象深刻的能力，但它们仍然存在可信度问题&#xff…...

编程日记 2024/12/20 14:23:16

【深度学习之三】FPN与PAN网络详解

FPN与PAN：深度学习中的特征金字塔网络与路径聚合网络 在深度学习的领域里，特征金字塔网络（Feature Pyramid Networks，简称FPN） 和 路径聚合网络（Path Aggregation Network，简称PAN）…...

编程日记 2024/12/20 14:22:15

Qt学习笔记第71到80讲

第71讲 事件过滤器的方式实现滚轮按键放大 事件体系（事件派发 -> 事件过滤->事件分发->事件处理）中，程序员主要操作的是事件分发与事件处理。我们之前已经通过继承QTextEdit来重写事件实现Ctrl加滚轮的检测，还有一种处理…...

编程日记 2024/12/20 14:14:03

以管理员身份运行

同时按下Ctrl Shift Esc键打开任务管理器，在任务管理器的左上角，点击“文件”菜单，在下拉菜单中选择“新建任务” 在弹出的对话框中，输入您想要运行的程序的名称。如果您不确定程序的确切名称，可以点击“浏览”来找到…...

编程日记 2024/12/20 14:07:55

用 Python 实现井字棋游戏

一、引言 井字棋（Tic-Tac-Toe）是一款经典的两人棋类游戏。在这个游戏中，玩家轮流在 3x3 的棋盘上放置自己的标记，通常是 “X” 和 “O”，第一个在棋盘上连成一线（横、竖或斜）的玩家即为获胜者。…...

编程日记 2024/12/20 14:06:54

06 实现自定义AXI DMA驱动

为什么要实现自定义AXI DMA驱动 ZYNQ 的 AXI DMA 在 Direct Register DMA （即 Simple DMA）模式下可以通过 AXIS 总线的 tlast 提前结束传输，同时还可以在 BUFFLEN 寄存器中读取到实际传输的字节数，但是通过 Linux 的 DMA 驱动框架…...

编程日记 2024/12/20 14:03:50

SpringBoot集成ENC对配置文件进行加密

在线MD5生成工具 配置文件加密&#xff0c;集成ENC 引入POM依赖 <!-- ENC配置文件加密 --><dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>2.1.2</ver…...

编程日记 2024/12/20 14:01:44

初学stm32 ——— 串口通信

目录 STM32的串口通信接口 UART异步通信方式特点&#xff1a; 串口通信过程 STM32串口异步通信需要定义的参数: USART框图&#xff1a; 常用的串口相关寄存器 串口操作相关库函数 ​编辑 串口配置的一般步骤 STM32的串口通信接口 UART&#xff1a;通用异步收发器USART&am…...

编程日记 2024/12/20 13:59:40

qwt 多Y轴 项目效果

项目场景&#xff1a; 在做一个半导体上位机软件项目实践中&#xff0c;需要做一个曲线展示和分析界面&#xff0c;上位机主题是用qt框架来开发&#xff0c;考虑到目前qt框架的两种图标库&#xff0c;一个是qcustomplot 一个是 qwt。之所以采用qwt &#xff0c;根本原因是因为…...

编程日记 2024/12/20 13:51:28

Java中通过ArrayList扩展数组

在Java中&#xff0c;ArrayList 是一个动态数组实现&#xff0c;能够根据需要自动调整其大小。与传统的数组不同&#xff0c;ArrayList 不需要预先指定大小&#xff0c;并且提供了许多方便的方法来操作集合中的元素。下面将详细介绍如何使用 ArrayList 进行数组的扩展&#xff…...

编程日记 2024/12/20 13:50:25

Java：链接redis报错：NoSuchElementException: Unable to validate object

目录 前言报错信息排查1、确认redis密码设置是否有效2、确认程序配置文件&#xff0c;是否配置了正确的redis登录密码3、检测是否是redis持久化的问题4、确认程序读取到的redis密码没有乱码 原因解决 前言 一个已经上线的项目&#xff0c;生产环境的redis居然没有设置密码&…...

编程日记 2024/12/20 13:49:24

datasets库之load_dataset

目录 问题解决方案 问题 使用peft用lora微调blip2时用到了一个足球数据集&#xff0c;如下&#xff1a; 原始代码如下 dataset load_dataset("ybelkada/football-dataset", split"train")然而这需要梯子才能下载&#xff0c;服务器较难用VPN所以使用au…...

编程日记 2024/12/20 13:44:19

React Router常见面试题目

1. React Router 支持哪几种模式? React Router 支持以下两种主要模式&#xff1a; BrowserRouter (基于 HTML5 History API 的模式) 原理&#xff1a; 利用 history.pushState 和 history.replaceState 操作浏览器历史栈&#xff0c;无需重新加载页面。URL 看起来像传统 URL…...

编程日记 2024/12/20 13:42:17

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/12/23 9:42:29

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/12/18 10:57:53

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/12/13 2:58:08

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/12/23 17:55:52

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/12/15 1:34:44

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/12/22 8:44:34

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2025/12/3 20:41:18