时间戳

首页 > 解决方案 > Nuxt.js 在渲染之前从头部删除所有 css 样式链接

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

问题描述

我想head在渲染页面之前从 nuxtjs 应用程序部分中删除所有样式链接并仅添加一个 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.jswebpacknuxt.js

解决方案

尝试添加 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',
      },
    ],

推荐阅读