在 Nuxt.js 应用程序中使用 <link> 标签预加载字体

问题描述 投票：0回答：1

要预加载字体，我尝试在 Nuxt 2.15

 中的
<link>
 文件中添加
app.html 标签。问题是我不知道如何访问我的 
/assets/fonts
文件夹。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <link rel="preload" href="~/assets/fonts/SoDoSans-Regular.woff" as="font" type="font/woff" crossorigin>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

如何从 

/assets/
中访问该 
app.html
文件夹？这给了我 404 错误，因为 
localhost:xxxx/~/assets/fonts/
文件夹不存在。我尝试过使用 
require()
但这也不起作用。它只是将其添加为字符串的一部分。

我已经看到这个解决方案建议修改

nuxt.config.js
，但我需要使用来自
<link>
的
app.html

标签来完成此操作
vue.js nuxt.js
1个回答
0
投票

也许你可以使用 Nuxt 2 将字体文件放在静态文件夹下

首先，将字体文件放入项目中的

/static
文件夹中

然后您可以在 

<link>
href

中使用相对路径 
<link rel="preload" href="/fonts/SoDoSans-Regular.woff" as="font" type="font/woff" crossorigin>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.