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中实现策略模式，通常包含三个…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。 单位，以个或者次数表示。 示例：…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...
智能职业发展系统：AI驱动的职业规划平台技术解析
智能职业发展系统：AI驱动的职业规划平台技术解析 引言：数字时代的职业革命 在当今瞬息万变的就业市场中，传统的职业规划方法已无法满足个人和企业的需求。据统计，全球每年有超过2亿人面临职业转型困境，而企业也因此遭…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...