vue.js - Nuxt Linking CSS Files in Head property from assets 问题

Question

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

  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 data-n-head="ssr" rel="stylesheet" href="[object Object]">
<link data-n-head="ssr" rel="stylesheet" href="[object Object]">

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

Answer 1

如果您想调用 head 属性中的 Assets ，您必须将其添加/移动到 /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>

Source01 | Source02