Vue.js Nuxt.js-字体在生产中预加载

在开发过程中一切正常-预加载有字体、图像和脚本。但是，当我构建产品时，字体不属于预加载。除了字体，什么都有

render: {
    http2: {
        push: true,
        pushAssets: (req, res, publicPath, preloadFiles) => console.log(preloadFiles)
    }
}

dev中的输出（

numxt

）

生产中的输出（

nuxt build；nuxt start

）：

我想不出来。也许有人遇到过这样的问题？如何决定

---

我不得不写这篇文章，因为我不能发布这么多代码，我不知道还能说什么。很抱歉这样作弊

---

---

UPD:Repo的最小复制

这是vue/nuxt中的一个错误。如果字体在全局css中，则不包括在预加载文件中

这里有一个PR可以修复它->

---

这里是vue中的PR->

了解网页包的工作原理

例如，当您运行

nuxt start

或

nuxt start

时，webpack将获取您的所有文件，包括图像、SCS、css、js、woff2等，并将它们包装到一个模块中，然后将它们作为模块数组传递到webpack引导程序中

因此，在捆绑过程结束时，字体会发生以下情况：

在

numxt start

查看您的风格

<style data-vue-ssr-id="17cfdfa9:0 aab9a468:0">
.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}
.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}
 @font-face{font-family:Play;src:url(/_nuxt/fonts/860685f.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
</style>

如果这不是你想要的答案或者你需要更多信息，请联系我，我已经尽力回答这个有趣的问题。我现在正在吃午饭，时间不多<代码>：）

参考资料

---

嘿，我也遇到了同样的问题，当然这是gtmetrix警告之一，所以在多次搜索后，我发现我可以将代码放在layouts/default.vue中（在某些项目中，目录的名称可能不同，但这是一个文件，您可以这样定义页眉和页脚组件：

<SiteHeader />

<nuxt /> ( your content )

<SiteFooter />

（你的内容）

在此default.vue的模板中，您可以通过任何方式像其他站点一样添加代码：

<template>
<div>
<link rel="preload" as="style" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossorigin="anonymous" onload="this.rel='stylesheet'"/>
</dive>
</template>

---

希望这对全局css中的字体有帮助，而不是在预加载的文件中。尝试将字体移动到布局中的内联样式。我已将字体导入移动到

layouts/default.vue

，但没有任何更改。在

控制台中。log

from

shoulldpreload

中也没有fonts@NikitaUmnov创建复制然后添加到question@NikitaUmnovye，很抱歉，它在布局中也不起作用。与外部css的问题相同。它只在页面中起作用，但这不是一个解决方案。因此，我们等待vue中PR的反馈，如果一切正常，nuxt中的PR将合并并在发布后的下一个补丁版本中发布

<style data-vue-ssr-id="17cfdfa9:0 aab9a468:0">
.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}
.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}
 @font-face{font-family:Play;src:url(/_nuxt/fonts/860685f.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
</style>

/***/ "./assets/Play.woff2":
/*!***************************!*\
  !*** ./assets/Play.woff2 ***!
  \***************************/
/*! no static exports found */

<SiteHeader />

<nuxt /> ( your content )

<SiteFooter />

<template>
<div>
<link rel="preload" as="style" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossorigin="anonymous" onload="this.rel='stylesheet'"/>
</dive>
</template>