应使用相对路径引用资源，避免绝对路径导致部署子路径时404；第三方CSS/JS须置于index.html中而非组件模板；静态资源可与代码同目录，但HTML需明确入口；HTML禁强缓存，哈希文件可缓存一年。

用相对路径引用资源，别碰绝对路径 浏览器加载 HTML 时，所有 href、src 路径默认以当前 HTML 文件所在目录为基准解析。比如 index.html 在根目录，logo.png 和它同级，就该写 ；如果 index.html 在 /pages/ 下，而图片在 /assets/，那就得写 。

• 绝对路径（如 /assets/logo.png）看似省事，但一旦项目部署到子路径（比如 @#@#@#@#@#@#@#@#@#@0），所有带 / 开头的路径都会指向根，直接 404
• ./ 前缀多数时候冗余，logo.png 和 ./logo.png 效果一样，但多打字符还容易出错
• 所有路径里不要出现空格或中文，否则 URL 编码后易出问题，也难调试

把第三方 CSS/JS 放进 index.html，别塞进组件模板 Angular、React 等框架的组件模板（如 component.html）不是资源入口，它们会被构建工具静态分析。你在里面写 ，构建阶段就会报 NG2008: Could not find stylesheet file——因为 CLI 根本没法在编译时解析变量。

• 全局依赖（Bootstrap、FontAwesome、jQuery）一律放进 index.html 的 或 底部
• index.html 是整个 SPA 的唯一 HTML 入口，浏览器首次加载它时，这些资源就同步拉取，不依赖 JS 渲染
• 如果要用 CDN 地址，直接写死 @#@#@#@#@#@#@#@#@#@1，别动态拼接

静态资源和代码文件混放没问题，但得守好“入口边界” Zero Server、Vite、甚至原生 file:// 协议都支持直接访问同目录下的 .png、.css、.html 文件。你完全可以让 main.jsx 和 style.css、logo.svg 放一起：

• 不需要专门建 /static 或 /public 目录（除非团队规范强制）
• 但所有 HTML 页面必须能通过一个明确的入口 URL 访问，比如 @#@#@#@#@#@#@#@#@#@2 对应 index.html，其他页面如 about.html 就得靠 跳转，而不是靠路由重写
• 如果用了前端路由（如 React Router 的 BrowserRouter），就得配服务端 fallback，否则刷新 /dashboard 会 404——这是 HTML 入口边界被绕过的典型表现

缓存策略要按文件类型分治，别一刀切设 Cache-Control: max-age=31536000 HTML 文件必须禁止强缓存，否则用户永远看不到新版本；而带哈希的 JS/CSS（如 main.a1b2c3.js）可以放心缓存一年。

• index.html：返回头设 Cache-Control: no-cache 或 max-age=0，强制每次检查
• 带内容哈希的资源（构建工具自动生成）：Cache-Control: public, max-age=31536000
• 不带哈希的资源（如 favicon.ico、robots.txt）：缓存时间设短些，比如 max-age=86400（1天），方便后续更新

最常被忽略的是：本地开发时浏览器可能缓存了旧 HTML，导致你改了 JS 却没生效，以为代码有问题——其实只是没硬刷 Ctrl+Shift+R。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！