SvelteKit构建后修改环境变量的方法及内部访问方式

核心逻辑：区分构建时与运行时变量 #

SvelteKit默认会将.env变量在构建阶段注入代码，所以修改后必须重新编译。要实现ASP.NET那种「改配置文件→重启服务生效」的效果，关键是把动态变更的配置放到运行时读取的独立文件中，而非依赖构建时的环境变量注入。

具体实现步骤 #

1. 创建运行时可修改的配置文件 #

在项目的static目录下新建JSON配置文件（比如config.json），这个目录下的文件会原封不动打包到构建产物，修改无需重建：

{
  "apiBaseUrl": "https://old-server.example.com",
  "envMode": "production"
}

2. 在项目中读取运行时配置 #

服务器端（+server.ts、+page.server.ts等）

直接用Node.js文件系统读取，建议封装成工具函数复用：

// src/lib/server/config.ts
import fs from 'fs';
import path from 'path';

export function getRuntimeConfig() {
  const configPath = path.join(process.cwd(), 'static', 'config.json');
  const configContent = fs.readFileSync(configPath, 'utf-8');
  return JSON.parse(configContent);
}

在服务器代码中调用：

// src/routes/api/+server.ts
import { getRuntimeConfig } from '$lib/server/config';

export async function GET() {
  const config = getRuntimeConfig();
  return new Response(JSON.stringify({ apiUrl: config.apiBaseUrl }));
}

客户端（+page.svelte、组件等）

通过fetch请求读取静态配置文件，也可以存入Svelte Store实现全局复用：

<script lang="ts">
  let config: { apiBaseUrl: string; envMode: string };

  async function loadConfig() {
    const res = await fetch('/config.json');
    config = await res.json();
  }

  loadConfig();
</script>

<div>当前API地址：{config?.apiBaseUrl}</div>

全局Store实现方式：

// src/lib/stores/configStore.ts
import { writable } from 'svelte/store';

export const configStore = writable<{ apiBaseUrl: string; envMode: string } | null>(null);

export async function initConfigStore() {
  const res = await fetch('/config.json');
  const config = await res.json();
  configStore.set(config);
}

在根布局+layout.svelte中初始化：

<script lang="ts">
  import { initConfigStore } from '$lib/stores/configStore';
  initConfigStore();
</script>

<slot />

3. 修改配置后的生效方式 #

• 客户端：直接刷新页面即可读取新配置
• 服务器端：如果是用node build直接运行，重启Node进程即可；如果部署在云平台（如Vercel、Netlify），重启服务实例即可（类似IIS重启）

可选：混合使用构建时与运行时变量 #

如果部分变量需要在构建时确定（比如打包后的资源路径），依然可以保留.env，动态变量放在config.json：

// 服务器端同时读取两种变量
import { env } from '$env/dynamic/private';
import { getRuntimeConfig } from '$lib/server/config';

export async function GET() {
  const buildTimeVar = env.BUILD_TIME_VAR;
  const runtimeVar = getRuntimeConfig().apiBaseUrl;
  return new Response(JSON.stringify({ buildTimeVar, runtimeVar }));
}

注意事项 #

• static目录下的配置文件是公开可访问的，不要存放敏感信息（如API密钥）。敏感配置建议放在服务器系统环境变量中，通过服务器端代码读取：

// src/routes/api/sensitive-config/+server.ts
export async function GET() {
  // 从系统环境读取敏感配置
  const sensitiveKey = process.env.SENSITIVE_API_KEY;
  return new Response(JSON.stringify({ sensitiveKey }), {
    headers: { 'Content-Type': 'application/json' },
    // 可添加权限验证逻辑
  });
}

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