cdn css不能直接写入nuxt的css数组，否则导致ssr失效、首屏闪动和seo归零；正确做法是通过app.head.link注入原生标签，并注意去重、路径规范及加载顺序与层叠优先级。
CDN CSS 不能塞进 css 数组里
直接写 css: ['https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css'] 看似简单，但会导致 SSR 失效——服务端不加载，只在客户端注入，页面首屏必然闪动（FOUC），SEO 友好性归零。Nuxt 的 css 数组只接受 webpack 可解析的本地路径或 node_modules 内路径，不支持远程 URL。
正确做法：用 app.head.link 推入 link 标签
CDN 资源必须走 HTML 的原生 <link rel="stylesheet">，且需手动控制加载时机和去重逻辑：
- 在
nuxt.config.ts的app.head配置中添加：app: { head: { link: [ { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css' } ] } } - 若 CDN 地址可能被多次引入（比如插件也推了同个 link），加
hid防重复：{ rel: 'stylesheet', href: '/css/vendor.css', hid: 'bulma-cdn' } - 注意路径以
/开头才对应public/目录；CDN 地址就直接写完整 URL，不用加/
为什么开发时正常，nuxi generate 后样式丢失？
生成静态站时，Nuxt 不会执行任何 JS 加载逻辑，只靠构建阶段提取的资源。CDN link 是纯 HTML 注入，不会被构建流程校验或预加载，所以：
- 确保 CDN 地址稳定可用（避免 404 或跨域拦截）
- 不要依赖它做关键布局（如重置样式、字体定义），否则首屏可能错乱
- 如果必须保障样式完整性，优先用
node_modules本地安装 +css数组引入，例如：'swiper/swiper-bundle.min.css'（前提是包里有style字段或明确路径） - 检查浏览器开发者工具的 Network 面板，确认该 CSS 请求是否返回 200，且未被 CSP 策略拦截
混用 CDN 和本地 CSS 时的顺序陷阱
app.head.link 插入的样式，加载顺序取决于数组位置，但它的优先级**晚于**css 数组注入的样式（后者走 webpack style-loader，更早挂载）。这意味着：
- 如果你在
css数组里写了'~/assets/css/reset.css'，又在app.head.link里加了 Bulma CDN，Bulma 的规则仍可能覆盖 reset —— 因为 Bulma 自身权重高，不是加载顺序问题，而是选择器 specificity - 真正影响“谁先生效”的是 CSS 本身的层叠规则，不是配置顺序；但若两个规则完全一样，后插入的
<link>会胜出 - 调试时别只看配置顺序，用浏览器 Elements 面板的 Styles 侧边栏点开每个规则，看哪条被划掉、哪条实际生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
