Nuxt 3/Vuetify 3配置Material Icons后出现路由警告求助

配置Nuxt3 + Vuetify3并引入@mdi/font后，终端持续出现[Vue Router warn]: No match found for location with path "/materialdesignicons.min.css.map"警告，标签中的图标能正常显示，但警告无法消除。当前nuxt.config.ts配置如下：

import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify'],
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    },
})

以下是几种可行的解决思路：

• 禁用CSS Source Map生成
  浏览器会尝试请求CSS对应的source map文件，若该文件不存在或Nuxt未正确处理路由，就会触发警告。直接在Nuxt配置中关闭CSS source map生成，避免浏览器发起该请求：
  修改nuxt.config.ts，添加css.sourceMap配置：

  import { defineNuxtConfig } from 'nuxt';
  export default defineNuxtConfig({
      modules: ['@nuxtjs/tailwindcss'],
      css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
      build: {
          transpile: ['vuetify'],
      },
      css: {
          sourceMap: false
      },
      vite: {
          define: {
              'process.env.DEBUG': false,
          },
      },
  })
  

• 重新安装@mdi/font包
  检查node_modules/@mdi/font/css目录下是否存在materialdesignicons.min.css.map文件，若不存在可能是包安装不完整。执行以下命令重新安装：

  npm uninstall @mdi/font
  npm install @mdi/font
  

  使用yarn或pnpm的话：

  yarn remove @mdi/font
  yarn add @mdi/font
  

• 通过中间件拦截map文件请求
  若不想关闭source map，可创建Nuxt服务器中间件拦截该路径请求，避免Vue Router抛出警告：
  在项目根目录创建server/middleware/ignore-map.ts，写入以下内容：

  export default defineEventHandler((event) => {
    if (event.node.req.url === '/materialdesignicons.min.css.map') {
      event.node.res.writeHead(204, { 'Content-Type': 'application/json' });
      event.node.res.end();
      return;
    }
  });
  

  该中间件会拦截对/materialdesignicons.min.css.map的请求，返回204无内容状态，从而跳过路由匹配检查。

• 改用Vuetify插件式图标导入
  移除nuxt.config.ts中css数组里的@mdi/font/css/materialdesignicons.min.css，通过Vuetify插件配置引入图标：
  创建plugins/vuetify.ts文件：

  import '@mdi/font/css/materialdesignicons.css';
  import { createVuetify } from 'vuetify';
  
  export default defineNuxtPlugin((app) => {
    const vuetify = createVuetify({
      icons: {
        defaultSet: 'mdi',
      },
    });
    app.vueApp.use(vuetify);
  });
  

  这种方式更贴合Nuxt与Vuetify的集成规范，可避免直接导入CSS导致的source map路径问题。

内容的提问来源于stack exchange，提问作者Dalibor