nuxt.config.js未加载.css文件

Question

我试图将我的元信息(主要在静态.css和.js文件中可见)添加到Nuxt应用程序中，方法是将它们添加到nuxt.config.js中。我期望我的所有全局元标记(字符集、关键字等)以及我的CSS在我正在测试的页面上重新加载项目时被加载，但是只有使用本地vue-meta部分才能得到这些期望的结果。我希望能够在配置文件中使用我的大部分元数据，因此，虽然在每个页面中保留所有内容都是一种选择，但这并不是我想要的。

在加载页面时，我没有收到警告或错误，这使我相信这不是一个问题，但我刚刚开始使用这个文件，我想知道它是否是琐碎的事情。

我试图在nuxt.config.js中实现的头部如下所示。所有文件路径都是有效的(因为它们是我在各个页面中使用的，而且它们工作得很好。

module.export = {
head:{
    meta: [
      {charset: 'utf-8'},
      {
        name: 'keywords', content: '~some keywords~'
      },
    ],
    link: [
      { rel: 'stylesheet', href: '/css/style.css' },
      { rel:'stylesheet', href:'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'},
      { rel:'canonical', href:'https://www.self.com' }

    ],
    script: [
      {src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'},
      {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'},
      {src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'},
    ]
  },
//...
}

我的css:部分中也有类似的部分，但是也没有产生任何结果。

Answer 1

我相信您在CSS链接href中缺少一个句点( . )，请尝试: href：。

此外，您还可以尝试添加CSS作为head对象的属性：

head {
link: [...],
css: ["./css/style.css"],
script: [...]
}/*end of head*/

如果您尝试第二个选项，然后从您的链接数组中删除CSS引用。

祝好运!