Vue项目可通过Nginx sub_filter在index.html中动态注入标签实现静态资源预加载，前提是构建启用filenameHashing、资源路径含hash且为相对路径，配置需精准匹配script/link标签并正确设置as类型。
Vue 项目构建后生成的静态资源（如 JS、CSS、字体等）默认不会被浏览器主动预加载，而 Nginx 本身不解析 HTML 或构建产物的依赖关系，所以不能自动注入 <link rel="preload">。但你可以通过 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><link href="/css/chunk-vendors.def456.css" rel="stylesheet">
如果用了 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="' '<link rel="preload" href="' ;
sub_filter '</script>' '" as="script"><script src="';</p><h1>匹配 CSS 文件并前置注入 preload</h1><p>sub_filter '<link href="' '<link rel="preload" href="' ;
sub_filter '" rel="stylesheet">' '" as="style"><link href="';
}⚠️ 注意：该方式是基于 HTML 字符串的简单替换，不解析 DOM。若你的 index.html 中有内联 script、多行写法或注释干扰，可能失效。建议构建后用脚本校验生成的 HTML 是否被正确注入。
优化与避坑要点
单纯注入 preload 不等于有效加速——浏览器只对 as 类型明确、且后续确实会被使用的资源才提前 fetch。常见问题和对策：
-
重复注入：Nginx 多次请求同一 HTML（如刷新、调试）可能触发多次 sub_filter，导致重复标签。可在 location 中加
add_header X-Preload "enabled";辅助验证，或用sub_filter_last_modified on;避免缓存污染。 -
CSS preload 后未加
rel="stylesheet"：上面配置中，替换后保留了原 link 标签，只是前置加了 preload，结构仍为：<link rel="preload" ...> <link href="..." rel="stylesheet">—— 这是合规写法。 -
字体/图片等资源未覆盖：Vue 默认不内联字体或图片，若需预加载，应先在
public/index.html中手动添加<link rel="preload" as="font">，再让 Nginx 统一处理；或改用<link rel="prefetch">（低优先级，适合路由级懒加载资源）。 -
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 的时刻——这才是真正“预加载”。
