MERN(Vite)部署Hostinger VPS后刷新页面显示JSON而非页面问题求助

核心问题根源 #

用express.static托管静态资源后，刷新前端路由页面时，服务器会优先匹配后端API路由——如果存在同名API，直接返回JSON响应；如果没有匹配到任何路由，就返回服务器默认空白404，而非前端的自定义404页面或index.html。此前app.get("*", ...)导致MIME类型错误，本质是路径配置错误，未正确指向client/dist下的静态资源，使得JS文件被当作HTML返回。

修复方案 #

1. 正确配置静态资源+路由 fallback #

在server.js中按静态资源→API路由→路由fallback的顺序配置，确保所有非API的GET请求都返回前端入口文件：

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

// 1. 托管前端打包后的静态资源
app.use(express.static(path.join(__dirname, "../client/dist/")));

// 2. 注册所有后端API路由（示例：替换为你的实际路由文件）
// app.use('/api', require('./routes/api'));
// app.use('/auth', require('./routes/auth'));

// 3. 路由兜底：所有非API的GET请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, "../client/dist/index.html"));
});

// 启动服务器
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

提示：如果VPS上的路径存在问题，建议使用绝对路径（比如/home/your-username/project/client/dist/）替代相对路径，避免路径解析错误。

2. 修正Vite打包配置 #

如果是域名根目录部署，无需设置base: './'，保持默认根路径即可；仅在子路径部署时才需要配置对应路径：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  // 根域名部署时注释此行；子路径部署（如https://xxx.com/app）则设置base: '/app/'
  // base: './',
  build: {
    outDir: 'dist', // 确保打包输出到client/dist目录
  }
});

3. 前端路由添加自定义404 #

在React Router中配置兜底路由，匹配所有未定义的前端路径：

// 示例：src/App.jsx或路由配置文件
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import NotFound from './pages/NotFound'; // 你的自定义404组件

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        {/* 匹配所有未定义的前端路由 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

4. 重新部署验证 #

1. 前端执行npm run build，确保client/dist生成最新静态文件
2. 将client/dist和server目录同步到VPS对应位置，重启服务器

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