版本号必须由构建工具从单一可信源（如package.json或git hash）注入html footer，确保强绑定、首屏可见、机器可读；禁止js运行时填充或仅用meta标签。
页面底部显示版本号，不是加个 <meta name="version"> 或用 JS 拼字符串就完事——它必须和构建产物强绑定、在 HTML 返回时已存在、对用户可见且对机器可读。
怎么把版本号安全注入到 <footer></footer> 里
核心原则：版本字段必须来自单一可信源（如 package.json 的 version 字段或 Git commit hash），由构建工具在生成 HTML 时替换占位符，而非运行时 JS 获取。
- Vite 项目可在
vite.config.ts中用define注入：__APP_VERSION__: JSON.stringify(pkg.version)，然后在index.html的<footer></footer>里写<footer>v%__APP_VERSION__%</footer> - Webpack 可用
HtmlWebpackPlugin的templateParameters传入版本变量，模板中写<footer>{{ version }}</footer> - 服务端渲染（如 Express + EJS）直接插值：
<footer>v</footer>，确保VERSION来自环境变量或构建时注入 - 绝对不要在
<footer></footer>里留空再靠 JS 填充——首屏会闪、SEO 不收录、无 JS 时不可见
为什么不能只用 <meta name="version"> 存版本
这个标签浏览器不解析、CDN 不识别、搜索引擎不索引，运维查线上问题时得手动开控制台，用户根本看不到。它本质是“藏”，不是“显”。
-
<meta name="version" content="v2.3.1">放在里，前面若有 BOM 或空格，部分 SSR 框架会直接丢弃整条标签 - 若同时需要人看+机器读，应双写：一个在
<footer></footer>可见位置，一个用语义更明确的<meta name="build-id" content="abc123">，但内容必须同源生成 - 更优解是挂到根元素：
，JS 可直接读document.documentElement.dataset.version，无兼容性问题
<footer></footer> 标签本身容易踩的坑
<footer></footer> 是语义标签，不是视觉容器；它的位置、闭合、嵌套方式直接影响 DOM 结构和 JS 可访问性。
- 必须闭合：
<footer>v2.3.1</footer>，不写会导致后续所有 HTML 被吞进该节点，document.querySelector('footer')返回null - 必须作为
的直接子元素（全站页脚），不能塞进<main></main>里——<main></main>有默认 display 行为，会截断 footer 宽度 - 版权文字建议用
<small></small>包裹：<footer><small>v2.3.1</small></footer>，因为 HTML5 明确定义<small></small>为“附属细则”，语义精准 - 避免用
innerHTML插入版本号，防止 XSS；若版本含特殊字符（如、<code>&），改用textContent
真正难的不是“怎么写出来”，而是确保每次构建时 package.json 的 version、Git tag、CI 构建日志、HTML 中显示的版本号四者完全一致——漏掉任一环，线上问题定位就会卡在“到底跑的是哪个包”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
