Nuxt 从资产问题中链接 Head 属性中的 CSS 文件

Question

我试图通过仅在一个特定页面中使用 nuxt 的 head 属性来链接我的 css 文件，如下所示：

  head: {
    link: [
      {rel: 'stylesheet', href: require('~/assets/css/font.css')},
      {rel: 'stylesheet', href: require('~/assets/css/style.css')},
    ]
}

执行此操作后，当我加载页面时一切都很好，但我在控制台 GET http://localhost:3000/[object%20Object] net::ERR_ABORTED 404 (Not Found)看到此错误

当我查看源代码时，我发现 CSS 文件是这样链接的：

<link data-n-head="ssr" rel="stylesheet" href="[object Object]">
<link data-n-head="ssr" rel="stylesheet" href="[object Object]">

我需要以这种方式导入我的CSS，但我仍然遇到这个问题，我该如何解决这个问题？

Answer 1

如果您想调用 head 属性中的资产，则必须将其添加/移动到/static可公开访问的文件夹中，然后显式引用它。此方法不会缩小文件。

head: {
  link: [
    {rel: 'stylesheet', type: 'text/css', href: '/css/font.css'},
    {rel: 'stylesheet', type: 'text/css', href: '/css/style.css'}
  ]
}

或者，您可以将其保留在原处，然后通过文件的标签@import之间导入它，而不需要初始的正斜杠。<style>.vue

<style scoped>
  @import url('~assets/css/font.css');
  @import url('~assets/css/style.css');
</style>

来源01 | 来源02