如何在Astro SSR运行时加载未经过构建的本地JSON配置文件

完全可以实现你的需求——在Astro SSR模式下直接从服务端加载未经过构建流程的本地配置文件，无需前端AJAX请求。以下是具体实现步骤和注意事项：

1. 存放配置文件到非构建目录 #

将你的配置文件（比如runtime-config.json）放在Astro项目根目录下的独立文件夹（如config/），不要放在src/或public/目录中：

• src/目录的文件会被构建流程处理，不符合你"文件名可预测、无需构建处理"的要求
• public/目录的文件会被复制到构建产物中，不适合需要运行时注入的场景

示例目录结构：

your-astro-project/
├── config/
│   └── runtime-config.json
├── src/
├── dist/
└── astro.config.mjs

2. 在SSR页面/组件中直接读取文件 #

利用Node.js的文件系统模块（fs/promises），在SSR的服务端脚本中直接读取配置文件。因为Astro SSR运行在Node环境中，无需通过AJAX即可访问本地文件。

基础实现示例（Astro页面） #

---
// src/pages/index.astro
import fs from 'node:fs/promises';
import path from 'node:path';

// 构造配置文件的绝对路径，确保服务端能找到文件
const configPath = path.resolve(process.cwd(), 'config/runtime-config.json');
// 读取并解析JSON配置
const runtimeConfig = JSON.parse(await fs.readFile(configPath, 'utf8'));
---

<div>
  <h2>运行时配置注入</h2>
  <p>应用名称：{runtimeConfig.appName}</p>
  <p>API地址：{runtimeConfig.apiBaseUrl}</p>
</div>

更灵活的封装方式 #

可以将配置加载逻辑封装成工具函数，方便多个页面复用：

// src/utils/loadRuntimeConfig.js
import fs from 'node:fs/promises';
import path from 'node:path';

export async function loadRuntimeConfig() {
  // 支持通过环境变量指定配置路径，部署时更灵活
  const configPath = process.env.RUNTIME_CONFIG_PATH || path.resolve(process.cwd(), 'config/runtime-config.json');
  const rawConfig = await fs.readFile(configPath, 'utf8');
  return JSON.parse(rawConfig);
}

在页面中调用：

---
import { loadRuntimeConfig } from '../utils/loadRuntimeConfig';
const config = await loadRuntimeConfig();
---

<p>当前环境：{config.env}</p>

3. 部署注意事项 #

• 确保SSR服务进程有读取配置文件的权限
• 部署时需将config/文件夹和构建后的dist/目录一同部署，或通过环境变量指定配置文件的绝对路径
• 如果从dist/目录启动SSR服务，注意调整路径（比如用path.resolve(process.cwd(), '../config/runtime-config.json')）

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