Nuxt Linking CSS Head 属性中的文件来自资产问题

Question

我正在尝试 link 我的 css 文件，仅在一个特定页面中使用 nuxt 的头部属性，如下所示：

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

加载页面时执行此操作后一切正常，但我在控制台看到此错误 获取 http://localhost:3000/[object%20Object] net::ERR_ABORTED 404（未找到）

当我查看源代码时，我看到 CSS 文件是这样 link 编辑的：

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

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

Answer 1

如果你想在头部调用一个资产属性你必须 add/move 它到 /static 文件夹，这是公开访问的，然后显式引用它。此方法不会缩小文件。

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

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

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

Source01 | Source02

Nuxt Linking CSS Head 属性中的文件来自资产问题

Nuxt Linking CSS Files in Head property from assets issue

vue.js

vuejs2

nuxt.js

nuxtjs

Nuxt Linking CSS Head 属性 中的文件来自资产问题

Nuxt Linking CSS Files in Head property from assets issue

vue.js

vuejs2

nuxt.js

nuxtjs

Nuxt Linking CSS Head 属性中的文件来自资产问题