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中实现策略模式，通常包含三个…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
Python爬虫（二）：爬虫完整流程
爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程 以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备 网站技术分析： 使用浏览器开发者工具（F12&…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...