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/style.css'

您也可以尝试将 CSS 添加为 head 对象的属性：

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

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

祝你好运！