如何在Vite 4.2.1与原生JavaScript中添加自定义404页面？

1. 先整理项目结构 #

先确保你的多页面项目结构大致如下（可根据实际调整）：

your-project/
├── public/
│   └── 404.html       # 自定义404页面
├── src/
│   ├── page1/
│   │   ├── index.html
│   │   └── main.js
│   └── page2/
│       ├── index.html
│       └── main.js
└── vite.config.js

2. 开发环境配置（本地调试生效） #

在vite.config.js中添加server.fallback配置，让开发服务器在找不到对应页面时返回自定义404页面：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    fallback: 'public/404.html'
  },
  // 已有的多页面构建配置（保留即可）
  build: {
    rollupOptions: {
      input: {
        page1: './src/page1/index.html',
        page2: './src/page2/index.html'
      }
    }
  }
});

配置后，本地开发时访问任何不存在的路径（比如http://localhost:5173/xxx）都会显示你的404页面。

3. 生产环境配置 #

生产构建后，静态文件需要服务器配合才能触发404页面，分两种场景处理：

场景A：本地预览生产构建产物（vite preview）

如果用vite preview测试生产包，需在vite.config.js中追加preview.fallback配置：

export default defineConfig({
  // ... 其他已有配置
  preview: {
    fallback: 'dist/404.html'  // 路径指向构建后的dist目录下的404文件
  }
});

构建时Vite会自动把public下的404.html复制到dist目录，无需额外操作。

场景B：部署到正式服务器

• Nginx：在站点配置中添加try_files指令，将不存在的路径导向404页面：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/dist;

  location / {
    try_files $uri $uri/ /404.html;
  }
}

• Apache：在dist目录下创建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /404.html [L]

• Express静态服务器：在服务代码中添加404路由兜底：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

// 处理所有不存在的路由，返回404页面
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', '404.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

注意事项 #

• 确保404.html中的静态资源路径正确，比如CSS/JS使用绝对路径（如/style.css）即可，因为public目录下的文件构建后会直接放在dist根目录。
• 如果多页面包含子路由（如/page1/sub），上述服务器配置已经通过过滤合法文件/目录避免误判，无需额外调整。

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