Nuxt 3构建后访问不存在路由出现Vue Router警告的处理方案

一、配置自定义404页面（推荐，从根源解决警告） #

当请求不存在的路由时，Vue Router抛出警告的核心原因是没有匹配到对应的路由规则。在Nuxt3中，只需在pages目录下创建404.vue文件，即可让路由系统自动匹配该页面，同时消除警告。

示例pages/404.vue代码：

<template>
  <div class="not-found-page">
    <h1>404 - 页面不存在</h1>
    <p>您访问的网址有误，请检查后重试</p>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

<script setup>
useHead({
  title: '404 - 页面不存在'
})
</script>

<style scoped>
.not-found-page {
  text-align: center;
  padding: 6rem 2rem;
}
</style>

配置完成后，访问任意不存在的路由时，Nuxt会自动渲染该404页面，终端不再输出路由匹配警告，同时优化了用户体验。

二、直接禁用路由匹配警告（仅隐藏日志） #

如果不需要自定义404页面，只想屏蔽终端的警告日志，可通过以下两种方式实现：

方式1：通过Nuxt插件过滤警告 #

在项目根目录创建plugins/router.ts文件，添加以下代码：

export default defineNuxtPlugin((nuxtApp) => {
  // 处理客户端警告
  nuxtApp.vueApp.config.warnHandler = (message) => {
    if (!message.includes('No match found for location')) {
      console.warn(message)
    }
  }

  // 处理服务端警告
  if (process.server) {
    const originalWarn = console.warn
    console.warn = (...args) => {
      const warnMsg = args[0]
      if (typeof warnMsg === 'string' && !warnMsg.includes('No match found for location')) {
        originalWarn(...args)
      }
    }
  }
})

方式2：通过Nuxt配置禁用Vue Router警告 #

在nuxt.config.ts中添加Vue Router的配置项，直接禁用路由警告：

export default defineNuxtConfig({
  vueRouter: {
    options: {
      suppressWarning: true
    }
  }
})

注意：这种方式会禁用Vue Router的所有警告，若需要仅过滤特定警告，优先选择方式1。

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