Vue项目可通过Nginx sub_filter在index.html中动态注入标签实现静态资源预加载，前提是构建启用filenameHashing、资源路径含hash且为相对路径，配置需精准匹配script/link标签并正确设置as类型。
Vue 项目构建后生成的静态资源（如 JS、CSS、字体等）默认不会被浏览器主动预加载，而 Nginx 本身不解析 HTML 或构建产物的依赖关系，所以不能自动注入 。但你可以通过 Nginx 的 sub_filter 模块在响应 HTML 时动态注入 preload 标签——前提是 Vue 构建输出的 index.html 中已有明确的资源路径（如 app.xxx.js、chunk-vendors.xxx.css），且这些路径可被正则匹配。
确认构建输出符合预加载前提
Vue CLI 默认已启用文件名哈希（filenameHashing: true），生成带 hash 的资源名（如 app.abc123.js），这是关键——没有 hash 就无法稳定匹配和预加载。检查 dist 目录下的 index.html，确保 script 和 link 标签的 src/href 是相对路径且含 hash：
<script src="/js/app.abc123.js"></script>
如果用了 public/ 下的静态资源或 CDN 配置，需同步调整 Nginx 匹配规则，否则 sub_filter 无法定位。
启用 Nginx sub_filter 并注入 preload 标签
Nginx 的 sub_filter 可在响应 HTML 时做字符串替换。我们不替换内容，而是利用它“匹配到资源路径后，在其前/后插入 preload”。以下配置片段加在 server 块内（需开启 sub_filter 模块，通常已编译进主流发行版）：
location / {
root /path/to/dist;
try_files $uri $uri/ /index.html;
<h1>启用 sub_filter，区分大小写，允许多次匹配</h1><p>sub_filter_once off;
sub_filter_types text/html;</p><h1>匹配 JS 文件并前置注入 preload（注意：匹配的是 index.html 中的 script 标签）</h1><p>sub_filter '<script src="'%20'<link%20rel=" preload href="'%20;%0Asub_filter%20'</script>'%20'" as="script"><script src="';</script></p><h1>匹配 CSS 文件并前置注入 preload</h1><p>sub_filter '<link href="'%20'<link%20rel=" preload rel="stylesheet">' '" as="style"><link href="';%0A%7D</p>
%E2%9A%A0%EF%B8%8F%20%E6%B3%A8%E6%84%8F%EF%BC%9A%E8%AF%A5%E6%96%B9%E5%BC%8F%E6%98%AF%E5%9F%BA%E4%BA%8E%20HTML%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E7%AE%80%E5%8D%95%E6%9B%BF%E6%8D%A2%EF%BC%8C%E4%B8%8D%E8%A7%A3%E6%9E%90%20DOM%E3%80%82%E8%8B%A5%E4%BD%A0%E7%9A%84%20index.html%20%E4%B8%AD%E6%9C%89%E5%86%85%E8%81%94%20script%E3%80%81%E5%A4%9A%E8%A1%8C%E5%86%99%E6%B3%95%E6%88%96%E6%B3%A8%E9%87%8A%E5%B9%B2%E6%89%B0%EF%BC%8C%E5%8F%AF%E8%83%BD%E5%A4%B1%E6%95%88%E3%80%82%E5%BB%BA%E8%AE%AE%E6%9E%84%E5%BB%BA%E5%90%8E%E7%94%A8%E8%84%9A%E6%9C%AC%E6%A0%A1%E9%AA%8C%E7%94%9F%E6%88%90%E7%9A%84%20HTML%20%E6%98%AF%E5%90%A6%E8%A2%AB%E6%AD%A3%E7%A1%AE%E6%B3%A8%E5%85%A5%E3%80%82
%E4%BC%98%E5%8C%96%E4%B8%8E%E9%81%BF%E5%9D%91%E8%A6%81%E7%82%B9
%E5%8D%95%E7%BA%AF%E6%B3%A8%E5%85%A5%20preload%20%E4%B8%8D%E7%AD%89%E4%BA%8E%E6%9C%89%E6%95%88%E5%8A%A0%E9%80%9F%E2%80%94%E2%80%94%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%AA%E5%AF%B9%20as%20%E7%B1%BB%E5%9E%8B%E6%98%8E%E7%A1%AE%E3%80%81%E4%B8%94%E5%90%8E%E7%BB%AD%E7%A1%AE%E5%AE%9E%E4%BC%9A%E8%A2%AB%E4%BD%BF%E7%94%A8%E7%9A%84%E8%B5%84%E6%BA%90%E6%89%8D%E6%8F%90%E5%89%8D%20fetch%E3%80%82%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%92%8C%E5%AF%B9%E7%AD%96%EF%BC%9A
-
%E9%87%8D%E5%A4%8D%E6%B3%A8%E5%85%A5%EF%BC%9ANginx%20%E5%A4%9A%E6%AC%A1%E8%AF%B7%E6%B1%82%E5%90%8C%E4%B8%80%20HTML%EF%BC%88%E5%A6%82%E5%88%B7%E6%96%B0%E3%80%81%E8%B0%83%E8%AF%95%EF%BC%89%E5%8F%AF%E8%83%BD%E8%A7%A6%E5%8F%91%E5%A4%9A%E6%AC%A1%20sub_filter%EF%BC%8C%E5%AF%BC%E8%87%B4%E9%87%8D%E5%A4%8D%E6%A0%87%E7%AD%BE%E3%80%82%E5%8F%AF%E5%9C%A8%20location%20%E4%B8%AD%E5%8A%A0%20
add_header%20X-Preload%20" enabled> 辅助验证，或用sub_filter_last_modified on;避免缓存污染。- CSS preload 后未加
rel="stylesheet"：上面配置中，替换后保留了原 link 标签，只是前置加了 preload，结构仍为：- 字体/图片等资源未覆盖：Vue 默认不内联字体或图片，若需预加载，应先在
public/index.html中手动添加，再让 Nginx 统一处理；或改用（低优先级，适合路由级懒加载资源）。- HTTP/2 Server Push 已弃用：不要用
http2_push，现代浏览器（Chrome/Firefox）已移除支持，且与 preload 冲突。验证是否生效
部署后访问页面，打开 Chrome DevTools → Network 面板，筛选
Preload请求类型，或查看 HTML 源码中是否出现类似：<link rel="preload" href="/js/app.abc123.js" as="script"><script src="/js/app.abc123.js"></script><link rel="preload" href="/css/chunk-vendors.def456.css" as="style"><link href="/css/chunk-vendors.def456.css" rel="stylesheet">
同时观察 Waterfall 图中，preload 资源的发起时间（initiator）应早于 parser 解析到对应 script/link 的时刻——这才是真正“预加载”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！ - CSS preload 后未加
