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中实现策略模式，通常包含三个…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
MFC 抛体运动模拟：常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机，点进去 点进去 查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议 当它与包含函数结合时，php://filter流会被当作php文件执行。 用php://filter加编码，能让PHP把文件内容…...
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...
基于Uniapp的HarmonyOS 5.0体育应用开发攻略
一、技术架构设计 1.混合开发框架选型 （1）使用Uniapp 3.8版本支持ArkTS编译 （2）通过uni-harmony插件调用原生能力 （3）分层架构设计： graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...
【Pandas】pandas DataFrame dropna
Pandas2.2 DataFrame Missing data handling 方法描述DataFrame.fillna([value, method, axis, …])用于填充 DataFrame 中的缺失值（NaN）DataFrame.backfill(*[, axis, inplace, …])用于**使用后向填充（即“下一个有效观测值”）…...