搭建Vite+Express+Tailwind应用遇问题：添加Express后Tailwind CSS失效

这种配置是否少见？ #

不算少见。很多项目会在生产阶段用Express作为后端服务托管Vite打包后的静态资源；在开发阶段，也有开发者需要Express提供API能力，同时保留Vite的热更新、资源预构建等特性。但直接用Express替代Vite的开发服务器且不做集成，确实是容易踩坑的错误做法，而非配置本身少见。

为什么Tailwind CSS会失效？ #

Vite在开发模式下不会把编译后的资源（如Tailwind CSS）写入本地文件，而是存在内存中，通过自身开发服务器提供特定路径的资源（比如/src/style.css、/@vite/client）。如果直接用Express返回原始的index.html，里面的资源引用路径无法被正确解析，浏览器找不到Vite编译后的CSS文件，自然无法生效。

正确的解决方式 #

1. 开发阶段：Vite代理API到Express #

保留Vite的开发服务器，通过Vite的代理配置将API请求转发到Express，既保留Vite的热更新、资源编译能力，又能使用Express的后端逻辑：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // Express服务的端口
        changeOrigin: true
      }
    }
  }
}

启动时先开启Express服务，再启动Vite开发服务器，前端请求/api/*会自动转发到Express。

2. 用Express集成Vite中间件 #

如果一定要用Express作为开发服务器的入口，需要让Express加载Vite的中间件，由Vite处理资源编译和路径解析：

// server.js
import express from 'express';
import { createServer as createViteServer } from 'vite';
import fs from 'fs/promises';
import path from 'path';

async function createServer() {
  const app = express();
  // 初始化Vite服务器，开启中间件模式
  const vite = await createViteServer({
    root: process.cwd(),
    server: { middlewareMode: true }
  });

  // 使用Vite中间件处理所有静态资源和编译请求
  app.use(vite.middlewares);

  app.get('*', async (req, res) => {
    try {
      // 获取Vite处理后的index.html内容
      const template = await vite.transformIndexHtml(
        req.originalUrl,
        await fs.readFile(path.resolve(process.cwd(), 'index.html'), 'utf-8')
      );
      res.send(template);
    } catch (err) {
      vite.ssrFixStacktrace(err);
      res.status(500).send(err.message);
    }
  });

  app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
  });
}

createServer();

3. 生产阶段：托管Vite打包后的静态资源 #

先运行vite build生成dist目录，再用Express托管该目录的静态文件：

// server.js
import express from 'express';
import path from 'path';

const app = express();
// 托管dist目录下的静态资源
app.use(express.static(path.join(__dirname, 'dist')));

// 所有请求返回index.html（适配SPA路由）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000, () => {
  console.log('Production server running on http://localhost:3000');
});

总结 #

这种配置本身并非“少见且容易出问题”，问题出在错误的集成方式——跳过Vite的资源处理逻辑直接用Express返回原始HTML。只要正确结合Vite的开发服务或中间件能力，就能稳定运行。

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