将Nuxt配置为按路由或页面包含CSS，而不是全局

Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它提供了一种简单且灵活的方式来构建和组织 Vue.js 应用。默认情况下，Nuxt.js 会将 CSS 样式文件全局引入，但是有时候我们希望按需引入 CSS，只在特定的路由或页面中使用。

要将 Nuxt.js 配置为按路由或页面包含 CSS，而不是全局引入，可以通过以下步骤实现：

在 Nuxt.js 项目的根目录下，创建一个名为 nuxt.config.js 的文件（如果已存在则跳过此步骤）。
打开 nuxt.config.js 文件，并添加以下配置：

export default {
  // ...

  css: [
    // 全局引入的 CSS 样式文件
    '@/assets/global.css'
  ],

  router: {
    middleware: 'css'
  },

  // ...
}

在项目的根目录下，创建一个名为 middleware 的文件夹（如果已存在则跳过此步骤）。
在 middleware 文件夹中，创建一个名为 css.js 的文件，并添加以下代码：

export default function (context) {
  // 当前路由的名称
  const routeName = context.route.name;

  // 需要引入的 CSS 样式文件
  const cssFiles = {
    home: '@/assets/home.css',
    about: '@/assets/about.css',
    // 添加更多的路由和对应的 CSS 样式文件
  };

  // 根据当前路由名称动态引入对应的 CSS 样式文件
  if (cssFiles[routeName]) {
    context.app.head.link.push({
      rel: 'stylesheet',
      href: cssFiles[routeName]
    });
  }
}

在上述代码中，我们通过 router 配置项指定了一个中间件 css，然后在 middleware 文件夹中创建了一个名为 css.js 的中间件文件。在中间件中，我们根据当前路由的名称动态引入对应的 CSS 样式文件。