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

Question

我试图通过将元信息(主要在静态 .css 和 .js 文件中可见)添加到 nuxt.config.js 中来将其包含到我的 Nuxt 应用程序中。我期望在我正在测试的页面上重新加载元素时加载所有全局元标记(字符集、关键字等)以及 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 引用。

祝你好运!