ViteJS+Svelte生产环境中Express路由返回index.html问题求助

核心问题原因 #

你之前把Express服务器初始化写在vite.config.js里是错误的——这个文件是Vite的构建配置文件，只有开发环境启动Vite时才会执行，生产构建后完全不会被运行，所以生产环境根本没有API服务在工作。另外，生产环境如果路由顺序写错（先处理SPA路由再处理API），会导致API请求被拦截返回index.html。

步骤1：拆分出独立的Express服务器文件 #

新建server.js，单独托管静态文件+处理API路由：

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;

// 解析JSON请求体（必须加，否则拿不到POST请求的参数）
app.use(express.json());

// 先注册所有API路由——这一步很重要，不能放到后面
app.post('/access', async (req, res) => {
  // 你的验证逻辑写在这里
  res.json({ success: true, msg: '验证通过' });
});

app.post('/validate-email', async (req, res) => {
  // 邮箱验证逻辑
  res.json({ valid: true });
});

// 托管Vite构建后的静态文件
app.use(express.static(path.join(__dirname, 'dist')));

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

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

步骤2：修改Vite配置，适配开发环境代理 #

修改vite.config.js，开发环境下把API请求代理到本地Express服务器，避免跨域：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';

export default defineConfig({
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      css: (css) => {
        css.write("public/bundle.css");
      },
    }),
  ],
  server: {
    proxy: {
      // 把API请求转发到本地Express服务器
      '/access': 'http://localhost:3000',
      '/validate-email': 'http://localhost:3000',
    }
  },
  build: {
    outDir: 'dist', // 构建产物输出到dist，和server.js里的路径对应
  }
});

步骤3：调整启动流程 #

开发环境 #

1. 先启动Express服务器：node server.js
2. 再启动Vite开发服务器：npm run dev
   此时前端请求会被Vite代理到Express，和你之前本地正常的情况一致。

生产环境 #

1. 先构建项目：npm run build
2. 启动Express服务器：node server.js
   现在Express会同时托管静态页面和处理API路由，不会再出现请求API返回index.html的问题。

额外说明 #

不需要用SSR，你的场景只是简单的服务端验证，用普通的Express托管静态文件+API路由完全足够，SSR是用于服务端渲染页面，没必要搞复杂。

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