Nuxt.js 在渲染之前从头部删除所有 css 样式链接答案

【问题标题】：Nuxt.js remove all css style link from head before renderNuxt.js 在渲染之前从头部删除所有 css 样式链接
【发布时间】：2020-08-09 20:36:34
【问题描述】：

我想在渲染页面之前从 nuxtjs 应用程序的head 部分中删除所有样式链接并仅添加一个 css 文件。我有一个 PurgeCSS 脚本，它将生成一个文件，其中仅包含页面所需的 css。

你们知道我可以把我的代码放在哪里吗？如果我把它放在 mounted() 钩子中，它会在删除链接之前发出 HTTP 请求。

mounted() {
  const styleLinks = document.head.querySelectorAll('link[rel="stylesheet"]')
  styleLinks.forEach(link => link.remove());
}

当前

<link rel="stylesheet" href="/_nuxt/app.css">
<link rel="stylesheet" href="/_nuxt/25.css">
<link rel="stylesheet" href="/_nuxt/11.css">
<link rel="stylesheet" href="/_nuxt/50.css">
<link rel="stylesheet" href="/_nuxt/37.css">
<link rel="stylesheet" href="/_nuxt/16.css">

希望

<link rel="stylesheet" href="/cdn/page.css">

【问题讨论】：

标签： vue.js webpack nuxt.js

【解决方案1】：

尝试添加 created(){ } 钩子，

或者，

转到 nuxt.config.js。请参考以下模板：祝你好运

head: {
    title: 'TCG',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    //  { rel: 'stylesheet', href: 'assets/css/bootstrap.min.css' },
      {
        rel: 'stylesheet',
        href:
          'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css',
      },
      {
        rel: 'stylesheet',
        href:
          '/assets/fonts/stylesheet.css',
      },
    ],

【讨论】：