标签必须位于HTML文档中才生效，写在Vue/React SFC的或内会被渲染到或忽略，导致CSS不加载、FOUC、预加载失效；SFC需通过全局注入、构建配置或useHead运行时注入三种合法方式管理。
标签不能直接写在 Vue/React 等单文件组件（SFC）的 或 <script></script> 块里 —— 它必须最终出现在 HTML 文档的 中，否则样式不加载、图标不显示、预加载失效。
为什么 SFC 里不能直接写
单文件组件本身不是 HTML 文档，它会被构建工具（如 Vite、Webpack）编译成 JS 模块或运行时逻辑。浏览器只解析最终输出的 HTML 字符串里的 内容。 若写在 中，会被当成普通 DOM 节点渲染到 里，触发 FOUC 或被 IE 完全忽略；写在 <script></script> 里动态插入，则失去阻塞渲染能力，样式延迟应用。
常见错误现象：
- 开发时看着有样式，构建后白屏或裸表一闪（FOUC）
- Network 面板看不到 CSS 请求，
里也找不到该 - Vite 项目中用了
import './style.css'，却还在 SFC 里重复写，造成冗余或冲突
Vue SFC 中管理
真正起效的方式只有三种，且都绕不开构建工具或框架的 head 管理机制：
-
全局注入：在
index.html的中直接写—— 最稳定，适合通用样式、字体、CDN 资源 -
构建时注入：Vite 项目可在
vite.config.ts的html.head配置项中添加，它会自动注入到所有页面的 -
运行时注入：Vue 3 +
@vueuse/core可用useHead({ link: [...] })，或 Nuxt 用useHead({ link: [...] })—— 仅适用于需要按路由/组件动态切换的场景（如换肤、多语言图标）
注意：useHead 注入的 仍受 SSR 限制：服务端渲染时若未正确 hydration，可能报 mismatch 错误。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
rel="icon" 在 SFC 中的尺寸陷阱
很多人试图在 Vue SFC 的 <script setup></script> 里用 document.head.appendChild(...) 动态换 favicon，但高分屏设备（如 MacBook Retina、iPhone）往往取不到清晰图标，因为：
- 只写一个
，浏览器默认匹配 16×16，导致模糊 - 多个
并存时，浏览器按顺序取第一个满足条件的 —— 把sizes="16x16"放最前，32×32 就永远不生效 -
rel="apple-touch-icon"必须显式声明sizes="180x180"，否则 iOS 强制缩放，图像失真
正确做法：在 index.html 中一次性声明全部尺寸，例如：
<link rel="icon" href="/icon-16.png" sizes="16x16" type="image/png"><link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png"><link rel="icon" href="/icon-192.png" sizes="192x192" type="image/png"><link rel="apple-touch-icon" href="/icon-180.png" sizes="180x180">
容易被忽略的 MIME 类型与跨域问题
即使 出现在最终 HTML 的 中，也可能静默失败：
- 服务端返回的 CSS 响应头是
Content-Type: application/octet-stream，旧版 Safari 或严格模式下拒绝解析 —— 此时加type="text/css"无用，必须修正服务端配置 - 用
rel="preload" as="font"加载字体时，漏写crossorigin属性，会导致字体跨域请求被拒（尤其 CDN 场景） - 本地双击打开 HTML（
file://协议），相对路径的href会因浏览器安全策略失败 —— 开发阶段务必用vite preview或npx serve启服务
最关键的判断点始终只有一个：打开浏览器开发者工具，切到 Network 面板，看那个 CSS 或 icon 文件是否真实发出了请求、返回了 200、响应头里 Content-Type 是否正确。其他都是障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
