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

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

img

这是源代码最后显示的js

img

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


在 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 应用的运行。在生产环境中,去除这些数据可能会导致应用的功能受限,因此请谨慎使用这些方法。