vite构建的html在spring boot中正确加载需四步：①将dist内容放入src/main/resources/static/；②vite配置base: '/'并确保资源路径匹配；③history模式下添加@getmapping("/**")兜底路由返回forward:/index.html；④避免html中混用前后端模板语法，动态数据用注入。
Spring Boot 里怎么让 Vite 构建的 HTML 被正确加载
直接把 vite build 输出的 dist/ 放进 src/main/resources/static 是常见错误——Vite 默认用 base: "/"，但 Spring Boot 的静态资源路径实际是根路径下挂载，导致 JS/CSS 路径 404。
- 改 Vite 配置：
base: "/"保持默认，但确保build.outDir指向src/main/resources/static（需手动复制或用插件） - 更稳做法：在
vite.config.ts中加build.rollupOptions.output.assetFileNames和chunkFileNames，避免哈希名带多余路径层级 - 入口 HTML 必须是
index.html，且不能依赖import.meta.env做路由判断——服务端不执行 JS，那些环境变量不会被注入 - 若前端用
history模式，Spring Boot 必须配兜底路由：@GetMapping("/**")返回"forward:/index.html"，否则刷新/user/123直接 404
HTML 模板里怎么安全嵌入动态数据而不破坏构建流程
手写 <div>{{ user.name }}</div> 看似方便，但 Vite 或 Webpack 构建时会把它当字符串原样输出，后端模板引擎（如 Thymeleaf）又不认识双大括号——两边都失效。
- 前端模板变量统一用
${}（JS 模板字面量语法），后端渲染前先用String.replace()或自定义过滤器预处理，避免和 JS 运行时冲突 - 真正需要服务端注入的数据，走
<script type="application/json" id="initial-data"></script>，再由前端 JSJSON.parse(document.getElementById('initial-data').textContent)读取 - 禁止在 HTML 模板里写
th:text="${user.name}"后又用 Vite 构建——Thymeleaf 标签会被当作纯文本，无法解析 - 构建产物中所有
href和src必须是相对路径（如./assets/js/main.a1b2.js）或绝对路径（/assets/js/main.a1b2.js），不能是../static/js/这种易错写法
自动化构建时 HTML 文件怎么通过 Lint 和可访问性检查
很多团队只对 JS 做 ESLint，却放任 HTML 出现语义缺失、标签未闭合、alt 缺失等问题，结果上线后 Lighthouse 分数暴跌，还被无障碍审计卡住。
- 用
htmlhint配合.htmlhintrc强制校验："tag-pair": true、"attr-no-duplication": true、"id-unique": true - CI 流程中加
axe-coreCLI 扫描：运行npx axe http://localhost:3000 --reporter=json，失败则中断部署 -
<img>标签必须有alt，空值写alt=""（装饰图），非空值禁止用占位符如alt="图片" - 表单控件必须有
label[for]或包裹input，否则axe报label-title-only错误
CDN 组件库怎么和本地构建流程共存不打架
开发时用 CDN 加 Bootstrap 很快，但 CI 构建时如果没禁用 HTML 插件自动注入脚本，就会出现两套 CSS 冲突、按钮样式错乱、modal 点击无反应。
- Vite 中禁用
vite-plugin-html对 CDN 资源的重写：配置inject: false，把<link>和<script></script>手动写进public/index.html - Webpack 项目里，删掉
HtmlWebpackPlugin的template选项，改用静态public/index.html，确保 CDN 地址不被误替换 - CDN 地址必须用完整 HTTPS，比如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css，不能写成//cdn...（HTTP/HTTPS 混合风险） - 本地开发启服务时，浏览器控制台若报
CORS或Blocked loading mixed active content，说明某处用了http://协议的 CDN，立刻换掉
git push 后生成的 HTML 既符合语义规范、又通过可访问性扫描、还能和后端路由无缝衔接——这些检查点一旦漏掉一个，线上就可能变成“能用但不敢测”的状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
