nuxt3怎么去除css和script id="__NUXT_DATA__" 里的数据

Question

这是打开网页源代码时显示的css

这是源代码最后显示的js

想问一下怎么把这些去掉？

Answer 1

在 Nuxt 3 中，要去除生成的 CSS 和 <script id="__NEXT_DATA__"> 里的数据，可以通过一些配置和插件来实现。以下是一种方法：

    去除 CSS：在 Nuxt 3 中，你可以使用@nuxtjs/style-resources模块，并通过配置文件 nuxt.config.js 来去除生成的 CSS 文件。首先，确保你已经安装了该模块：
    bash
    Copy code
    npm install @nuxtjs/style-resources
    然后，在 nuxt.config.js 文件中添加以下配置：
   
    export default {
      // ...
      styleResources: {
        // 不将 CSS 输出到文件
        css: [],
      },
      // ...
    }
    通过将 styleResources 的 css 属性设置为空数组，Nuxt 将不会输出任何 CSS 文件。
    
    去除 <script id="__NEXT_DATA__"> 里的数据：要去除这个脚本标签里的数据，可以使用自定义 Nuxt 插件。在项目的 plugins 目录下，创建一个名为 remove-next-data.js 的文件，内容如下：
   
    export default (ctx) => {
      // 在页面渲染之前，删除 "__NEXT_DATA__" 标签
      ctx.nuxt.hook('render:before', (renderer) => {
        renderer.app.html = renderer.app.html.replace(/<script id="__NEXT_DATA__">[^<]+<\/script>/, '');
      });
    };
    在 nuxt.config.js 中，添加该插件：
   
    export default {
      // ...
      plugins: [
        // 添加插件路径
        { src: '~/plugins/remove-next-data.js', mode: 'client' },
      ],
      // ...
    }
    这样，Nuxt 将在渲染页面之前删除 __NEXT_DATA__ 标签，从而去除其中的数据。
    
    请注意，虽然这样去除了 CSS 和 __NEXT_DATA__ 标签的数据，但这样可能会影响 Nuxt 应用的运行。在生产环境中，去除这些数据可能会导致应用的功能受限，因此请谨慎使用这些方法。