Astro SSR无法找到CSS文件及资源问题求助

问题描述 #

按照Astro官方步骤构建应用后，启动Node服务时出现静态资源（CSS）找不到的404错误，导致页面样式失效。复现步骤：

• 从官方模板创建空Astro项目
• 执行npx astro add node安装@astro/node适配器
• 运行npm run build完成项目构建
• 执行node ./dist/server/entry.mjs启动服务

解决方案 #

方案1：调整Node适配器为Standalone模式并确认配置 #

修改astro.config.mjs，确保适配器模式为standalone，Astro会自动处理静态资源的路由映射：

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
});

重新执行npm run build，再启动服务即可。Standalone模式下，Node服务会自动关联dist/client目录下的静态资源，无需额外配置。

方案2：用Express托管静态资源（Middleware模式） #

如果使用Middleware模式，需要手动配置静态资源托管：

1. 修改astro.config.mjs：

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'middleware',
  }),
});

2. 在项目根目录创建server.js文件：

import express from 'express';
import { handler as astroHandler } from './dist/server/entry.mjs';

const app = express();
// 托管dist/client下的静态资源
app.use(express.static('dist/client'));
// 交由Astro处理路由
app.use(astroHandler);

app.listen(3000, () => {
  console.log('服务运行在 http://localhost:3000');
});

3. 安装express依赖：npm install express
4. 重新构建后，执行node server.js启动服务即可。

排查要点 #

• 确认dist/client目录下存在对应的CSS文件，构建过程无报错
• 检查浏览器控制台的资源请求路径，确保路径与dist/client内的文件结构匹配

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