34 vue 项目默认暴露出去的 public 文件夹 和 CopyWebpackPlugin
前言
这里说一下 vue.config.js 中的一些 public 文件夹是怎么暴露出去的?
我们常见的 CopyWebpackPlugin 是怎么工作的 ?
这个 也是需要 一点一点积累的, 因为 各种插件 有很多, 不过 我们仅仅需要 明白常见的这些事干什么的即可
当然 以下内容会涉及到一部分vue-cli, webpack 的相关源码, 如果不明白 可以查询一下, 或者 联系
以 mars3d_test 项目为例
关于 vue 项目默认暴露出去的 public 文件夹
在 public 文件夹下面新建 1.txt
然后, 启动项目
浏览器中访问 “http://localhost:8080/1.txt” 可以看到 可以访问到 这个 1.txt
那么 这部分 public 文件夹下面的服务 是怎么暴露出去的呢 ?
我们来看一下这里一整个 http 请求的处理流程
请求为 “http://localhost:8080/1.txt”, 然后这里 processRequest 中根据 “/1.txt”, 以及输出路径[当前目录下面的 dist 目录, 在 vue.config.js 中配置]的上下文来解析是否存在文件, 可以找到文件 “/Users/jerry/WebstormProjects/mars3d_test/dist/1.txt”
然后 这里就是读取 目标文件的内容, 然后 基于 http 将文件内容响应回去
可以看到的是这里 “/Users/jerry/WebstormProjects/mars3d_test/dist” 在我们的真实硬盘上面是没有这个目录的, 这是因为 这个目录是 node 这边运行时自己 构建的一个内存文件系统
我们来看一下这个内存文件系统的上下信息
dist 下面的即为我们在 http://localhost:8080/1.txt 中访问拿到的最终的文件
这里得出的另外一个结论是 public 中的内容是会影响目标 node 进程的内存占用的
如下内存使用情况为 public 下面有一个 1G 大小的 1.mp4 文件, node进程内存大约占用 2G
master:~ jerry$ ps -ef | grep node501 567 479 0 9:38AM ?? 0:02.88 /usr/local/bin/node /Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/js-language-service.js -id=1698543489067 -debug-name=eslint501 763 479 0 9:47AM ?? 1:29.36 /usr/local/bin/node /Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/js-language-service.js -id=1698544044780 -debug-name=VueService501 2216 2214 0 2:07PM ttys001 0:23.18 node /Users/jerry/WebstormProjects/mars3d_test/node_modules/.bin/vue-cli-service serve501 2403 1154 0 2:22PM ttys002 0:00.00 grep node
master:~ jerry$ top | grep 2216
2216 node 0.0 00:23.18 15 1 62+ 2060M+ 0B 1993M+ 2214 2214 sleeping *0[1+] 0.00000 0.00000 501 1139502+ 631+ 5626+ 262+ 251446+ 15259+ 90024+ 78+ 235 0.0 0 0 jerry N/A N/A N/A N/A N/A N/A
356 PAH_Extension 0.0 00:01.55 3 1 201+ 4776K+ 0B 2216K+ 356 1 sleeping 0[3990+] 0.00000 0.00000 501 21279+ 323+ 27355+ 9207+ 31733+ 68685+ 31438+ 12+ 403 0.0 0 0 jerry N/A N/A N/A N/A N/A N/A
2216 node 0.0 00:23.18 15 1 62 2060M 0B 1993M 2214 2214 sleeping *0[1] 0.00000 0.02507 501 1139514+ 631 5635+ 262 251454+ 15280+ 90028+ 78 235 0.0 447035 1421543 jerry N/A N/A N/A N/A N/A N/A
356 PAH_Extension 0.0 00:01.55 3 1 201 4776K 0B 2216K 356 1 sleeping 0[3990] 0.00000 0.00000 501 21279 323 27357+ 9208+ 31736+ 68694+ 31442+ 12 403 0.0 96732 335921 jerry N/A N/A N/A N/A N/A N/A
2216 node 0.0 00:23.18 15 1 62 2060M 0B 1993M 2214 2214 sleeping *0[1] 0.00000 0.00000 501 1139514 631 5635 262 251456+ 15280 90029+ 78 236+ 0.0 24825 165089 jerry N/A N/A N/A N/A N/A N/A
356 PAH_Extension 0.0 00:01.55 3 1 201 4776K 0B 2216K 356 1 sleeping 0[3990] 0.00000 0.00000 501 21279 323 27357 9208 31736 68694 31442 12 403 0.0 0 0 jerry N/A N/A N/A N/A N/A N/A
2216 node 0.0 00:23.18 15 1 62 2060M 0B 1993M 2214 2214 sleeping *0[1] 0.00000 0.04440 501 1139522+ 631 5637+ 262 251462+ 15294+ 90035+ 78 236 0.0 568850 1395726 jerry N/A N/A N/A N/A N/A N/A
356 PAH_Extension 0.0 00:01.55 3 1 201 4776K 0B 2216K 356 1 sleeping 0[3990] 0.00000 0.00000 501 21279 323 27357 9208 31736 68694 31442 12 403 0.0 0 0 jerry N/A N/A N/A N/A N/A N/A
^C
如下内存使用情况为 public 下面删除了 1G 大小的 1.mp4 文件, node进程内存大约占用 600M
master:~ jerry$ ps -ef | grep node501 567 479 0 9:38AM ?? 0:02.88 /usr/local/bin/node /Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/js-language-service.js -id=1698543489067 -debug-name=eslint501 763 479 0 9:47AM ?? 1:29.47 /usr/local/bin/node /Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/js-language-service.js -id=1698544044780 -debug-name=VueService501 2415 2413 0 2:23PM ttys001 0:16.84 node /Users/jerry/WebstormProjects/mars3d_test/node_modules/.bin/vue-cli-service serve501 2421 1154 0 2:23PM ttys002 0:00.00 grep node
master:~ jerry$ top | grep 2415
2415 node 0.0 00:17.80 15 1 60+ 609M+ 0B 0B 2413 2413 sleeping *0[1+] 0.00000 0.00000 501 377257+ 716+ 713+ 312+ 215051+ 2107+ 48138+ 15+ 114 0.0 0 0 jerry N/A N/A N/A N/A N/A N/A
453 Google Chrome He 0.0 00:02.46 10 1 96+ 15M+ 0B 13M+ 440 440 sleeping *0[3+] 0.00000 0.00000 501 36591+ 3119+ 11540+ 6777+ 32415+ 26062+ 20643+ 166+ 2207 0.0 0 0 jerry N/A N/A N/A N/A N/A N/A
2415 node 0.0 00:17.80 15 1 60 609M 0B 0B 2413 2413 sleeping *0[1] 0.00000 0.00688 501 377261+ 716 716+ 312 215055+ 2114+ 48140+ 15 114 0.0 147728 622406 jerry N/A N/A N/A N/A N/A N/A
2415 node 0.0 00:17.80 15 1 60 609M 0B 0B 2413 2413 sleeping *0[1] 0.00000 0.00000 501 377261 716 716 312 215057+ 2114 48141+ 15 115+ 0.0 24469 176660 jerry N/A N/A N/A N/A N/A N/A
2300 sandboxd 0.0 00:01.23 4 3 66 4320K 0B 1856K 2300 1 sleeping *0[1] 0.00000 0.00000 0 13745 170 4445 2096 21255+ 5089 4211+ 366 91+ 0.0 29425 124158 root N/A N/A N/A N/A N/A N/A
vue 项目什么时候暴露出去的 public 文件夹
在 Compiler 文件处理后期, 会将上下文采集的文件 提交给 node 维护的内存文件系统
然后这里的 writeOut 中的相关处理, 会将 1.txt 中的内容写入到 内存文件系统
然后 后面 客户端这边读取 1.txt 就可以读取到对应的内容了, 比如 这里可以看到 buf.toString 为 1.txt 中的内容
Compiler.assets 中的 1.txt 是哪里来的呢?
Compiler.assets 中的 1.txt 是来自于 copy 的一个 plugin
然后他的 pattern 为 “/Users/jerry/WebstormProjects/mars3d_test/public”, 将项目路径下的 public 的所有的文件复制到 内存文件系统中的 “/Users/jerry/WebstormProjects/mars3d_test/dist” 下面
这里是 先暂存到了 Compiler.assets
这个 copy 的 plugin 是来自于 vue-cli 中的 app.js 初始化的时候默认初始化的
另外这个 “public” 是 app.js 中固定死的, 因此 vue 项目中的 public 文件夹一定会被默认暴露出去
当然 这里还有其他的 plugin, 我们暂时不关心
CopyWebpackPlugin 的使用
同样是基于和上面拷贝 public 目录相同的 CopyWebpackPlugin 来进行的文件拷贝
vue.config.js 中使用如下, 配置了需要拷贝多个目录到 内存文件系统 以暴露这部分文件作为 http 服务
拷贝的文件信息如下, 将 “node_modules/mars3d-cesium/Build/Cesium/” 下面的 “Workers”, “Assets”, “ThirdParty”, “Widgets” 文件夹分别拷贝到 “dist/mars3d-cesium” 的 “Workers”, “Assets”, “ThirdParty”, “Widgets”
这样前端页面就可以通过 “http://localhost:8080/mars3d-cesium/” 来访问相关的服务了
因此我们页面上 “/mars3d-cesium” 下面的这部分文件暴露为 http 服务就是这样访问到的
完
相关文章：
34 vue 项目默认暴露出去的 public 文件夹 和 CopyWebpackPlugin
前言 这里说一下 vue.config.js 中的一些 public 文件夹是怎么暴露出去的? 我们常见的 CopyWebpackPlugin 是怎么工作的 ? 这个 也是需要 一点一点积累的, 因为 各种插件 有很多, 不过 我们仅仅需要 明白常见的这些事干什么的即可 当然 以下内容会涉及到一部分vue-cli,…...
Redis 不再“开源”，对中国的影响及应对方案
Redis 不再“开源”，使用双许可证 3 月 20 号，Redis 的 CEO Rowan Trollope 在官网上宣布了《Redis 采用双源许可证》的消息。他表示，今后 Redis 的所有新版本都将使用开源代码可用的许可证，不再使用 BSD 协议，而是采用…...
在CentOS中怎么安装和配置NginxWeb服务器
在CentOS中安装和配置Nginx Web服务器可以通过以下步骤完成： 1. 使用yum安装Nginx： sudo yum install nginx 2. 启动Nginx服务： sudo systemctl start nginx 3. 设置Nginx开机自启动： sudo systemctl enable nginx 4. 配置防火墙规…...
使用docker搭建Fluentd的教程
使用Docker搭建Fluentd的教程 步骤 1: 拉取Fluentd镜像 首先，需要从Docker Hub上拉取Fluentd的官方镜像： docker pull fluent/fluentd:v1.14-debian-1这里使用的是基于Debian的Fluentd 1.14版本的镜像，可以根据需要选择其他版本。 步骤 2…...
Python的re模块进行正则表达式操作时的常用方法[回顾学习]
re 模块是 Python 中用于处理正则表达式的标准库模块。通过 re 模块，可进行字符串匹配、搜索和替换等各种操作。 有几个常用的方法：# re.match(pattern, string)：从字符串开头开始匹配模式，并返回匹配对象。适合用于确定字符串是否…...
Rust之构建命令行程序(五)：环境变量
开发环境 Windows 11Rust 1.77.0 VS Code 1.87.2 项目工程 这次创建了新的工程minigrep. 使用环境变量 我们将通过添加一个额外的功能来改进minigrep:一个不区分大小写的搜索选项，用户可以通过环境变量打开该选项。我们可以将此功能设置为命令行选项，…...
ARMday7
VID_20240322_203313 1.思维导图 2.main.c #include"key_inc.h" //封装延时函数 void delay(int ms) {int i,j;for(i0;i<ms;i){for(j0;j<2000;j){}} } int main() {//按键中断的初始化key1_it_config();key2_it_config();key3_it_config();while(1){printf(&q…...
Ubuntu中安装VSCode的一个指令
问题描述 本来想去VSCode官网上下载软件包，然后双击使用Ubuntu Software安装的，但是安装老不成功。 想用命令行指令dpkg进行安装，虽然能成功，但是后续使用 code . 命令打开VSCode又报错说找不到命令。 解决方式 在命令行中使用…...
生活电子产品拆解分析~汇总目录
一、锂电池电源 ①电子产品拆解分析-暖手宝 ②电子产品拆解分析-电动牙刷 ③电子产品拆解分析-充电宝台灯 ④电子产品拆解分析-太阳能自动感应灯 ⑤电子产品拆解分析-人体感应灯 ⑥电子产品拆解分析-食物电子秤 ⑦电子产品拆解分析-6600mA充电宝 ⑨电子产品拆解分析-触摸化妆镜…...
Tkinter 一文读懂
Tkinter 简介 Tkinter（即 tk interface，简称“Tk”）本质上是对 Tcl/Tk 软件包的 Python 接口封装，它是 Python 官方推荐的 GUI 工具包，属于 Python 自带的标准库模块，当您安装好 Python 后，就可…...
2核4G服务器阿里云性能测评和优惠价格表
阿里云2核4G服务器租用优惠价格，轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月，活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图： 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…...
Day41：WEB攻防-ASP应用HTTP.SYS短文件文件解析Access注入数据库泄漏
目录 ASP-默认安装-MDB数据库泄漏下载 ASP-中间件-CVE&短文件&解析&写权限 HTTP.SYS（CVE-2015-1635）主要用作蓝屏破坏，跟权限不挂钩 IIS短文件(iis全版本都可能有这个问题) IIS文件解析 IIS写权限 ASP-SQL注入-SQLMAP使用…...
什么是单点登录？
单点登录（Single Sign On，简称 SSO）简单来说就是用户只需在一处登录，不用在其他多系统环境下重复登录。用户的一次登录就能得到其他所有系统的信任。 为什么需要单点登录 单点登录在大型网站应用频繁，比如阿里旗下有淘…...
elasticsearch的数据搜索
DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 Elasticsearch提供了基于JSON的DSL（Domain Specific Language）来定义查询。常见的查询类型包括： 查询所有：查询出所有数据，一般测试用。例如：match_all 全文检索（full text）查询：利用分词器对用户…...
云原生相关概念（小白版）
先说概念： 云原生应该是一种“建立在云上的多种效率提升技术的复合体"（而不是单一的技术创新），主要就是在云技术摆脱物理储存限制的基础上，进一步实现应用的专业优化（即文章里说的按功能切分…...
Dell戴尔XPS 12 9250二合一笔记本电脑原装出厂Windows10系统包下载
链接：https://pan.baidu.com/s/1rqUEM_q5DznF0om6eevcwg?pwdvij0 提取码：vij0 戴尔原厂WIN10系统自带所有驱动、出厂主题壁纸、系统属性专属联机支持标志、系统属性专属LOGO标志、Office办公软件、MyDell等预装程序 文件格式：esd/wim/sw…...
YOLOv5改进 | 图像去雾 | 利用图像去雾网络AOD-PONO-Net网络增改进图像物体检测（全网独家首发）
一、本文介绍 本文给大家带来的改进机制是利用AODNet图像去雾网络结合PONO机制实现二次增强，我将该网络结合YOLOv5针对图像进行去雾检测（也适用于一些模糊场景，图片不清晰的检测），同时本文的内容不影响其它的模块改进可以作为工作量凑近大家的论文里，非常的适用，图像去…...
代码随想录算法训练营Day55 ||leetCode 583. 两个字符串的删除操作 || 72. 编辑距离
583. 两个字符串的删除操作 这道题的状态方程比上一题简单一些 初始化如下 class Solution { public:int minDistance(string word1, string word2) {vector<vector<int>> dp(word1.size() 1, vector<int>(word2.size() 1));for (int i 0; i < word1…...
Hive常用函数 之 数值处理
Hive常用函数 之 数值处理 以下是Hive中常用的数值处理函数，可用于执行各种数学运算和数值转换操作。 1. ABS()：返回一个数的绝对值。 SELECT ABS(-10); -- 输出: 102. ROUND()：对一个数进行四舍五入。 SELECT ROUND(10.56); -- 输出: 113.…...
策略模式在项目中实际应用
Java策略模式是一种行为设计模式，它使你能在运行时改变对象的行为。策略模式定义了一系列的算法，并将每一个算法封装起来，使它们可以互相替换。策略模式使得算法可以独立于使用它的客户端变化。在Java中实现策略模式，通常包含三个…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。 功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
【网络安全】开源系统getshell漏洞挖掘
审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...
详细解析)
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...
6.9-QT模拟计算器
源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...
TJCTF 2025
还以为是天津的。这个比较容易，虽然绕了点弯，可还是把CP AK了，不过我会的别人也会，还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...
Java后端检查空条件查询
通过抛出运行异常：throw new RuntimeException("请输入查询条件！");BranchWarehouseServiceImpl.java // 查询试剂交易（入库/出库）记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...