Vue/Nuxt项目如何配置让自定义404页面在访问不存在URL时生效

以下方案区分不同技术栈版本，按需选择即可：

纯Vue项目配置 #

Vue3 + Vue Router 4 #

在路由配置数组的末尾添加通配符兜底路由，指向你已开发完成的404页面组件：

import { createRouter, createWebHistory } from 'vue-router'
import NotFound from './views/NotFound.vue'

const routes = [
  // 所有已声明的业务路由放最前面
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

Vue2 + Vue Router 3 #

通配符路由写法略有差异：

import VueRouter from 'vue-router'
import NotFound from './views/NotFound.vue'

const router = new VueRouter({
  routes: [
    // 所有已声明的业务路由放最前面
    {
      path: '*',
      component: NotFound
    }
  ]
})

Nuxt项目配置 #

Nuxt 3 #

两种配置方式二选一即可：

• 页面路由模式（开启pages/目录）：直接在pages/根目录下新建[...slug].vue文件，将404页面代码写入该文件，Nuxt3会自动将所有未匹配到的路由导向该兜底页面。
• App路由模式（使用app/目录）：在app/根目录下新建error.vue文件，作为全局错误兜底页面，可通过useError()方法区分错误类型：

<script setup>
const error = useError()
// 可根据状态码做差异化展示
if (error.value.statusCode === 404) {
  // 404场景专属逻辑
}
</script>

静态部署补充配置：执行nuxt generate打包静态站点时，需要在nuxt.config.ts中添加如下配置，确保托管服务能正确识别404页面：

export default defineNuxtConfig({
  generate: {
    fallback: '404.html'
  }
})

Nuxt 2 #

直接在pages/根目录下新建_.vue文件，写入404页面代码即可，Nuxt2会自动识别为路由兜底页面。
静态部署补充配置：在nuxt.config.js中添加如下配置：

export default {
  generate: {
    fallback: true
  }
}

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