SvelteKit应用专属编译时设置的通用配置方法咨询

这是SvelteKit官方内置支持的标准方案，也是所有Svelte开发者通用的公认做法，不需要引入第三方配置工具，完全满足不同环境编译时注入不同API URL的需求。

一、提供多环境配置 #

SvelteKit 基于 Vite 的环境变量能力实现编译时配置注入，变量会在构建阶段直接替换到最终产物中，不存在运行时读取开销。

• 变量前缀规则：
  • 以 VITE_ 为前缀的变量为公开变量，会同时注入到客户端和服务端代码中，适合存API URL这类非敏感配置
  • 以 SECRET_ 为前缀的变量为私有变量，只会注入到服务端代码中，不会泄露到客户端，适合存密钥这类敏感配置
• 配置步骤：
  1. 在项目根目录创建对应环境的配置文件，命名遵循Vite环境文件规则：
     • .env.development：本地开发环境（执行npm run dev时自动加载）
     • .env.staging：预发布环境
     • .env.production：生产环境（执行npm run build时默认加载）
  2. 在对应环境文件中写入配置，示例如下：

     # .env.development 内容
     VITE_API_URL = http://localhost:3000/api
     

     # .env.staging 内容
     VITE_API_URL = https://staging-your-domain.com/api
     

     # .env.production 内容
     VITE_API_URL = https://your-domain.com/api
     

  3. 修改package.json中的构建命令，指定对应环境的加载模式：

     {
       "scripts": {
         "dev": "vite dev",
         "build:staging": "vite build --mode staging",
         "build:prod": "vite build --mode production"
       }
     }
     

     执行对应命令即可构建出对应环境配置的站点包。

二、在代码中消费配置 #

SvelteKit 提供了内置的环境变量模块，不需要手动处理环境文件加载，直接导入即可使用。

客户端代码（.svelte组件、客户端load函数等） #

从$env/static/public模块导入公开变量即可，示例：

<script>
  import { VITE_API_URL } from '$env/static/public';

  async function getList() {
    const res = await fetch(`${VITE_API_URL}/goods/list`);
    return await res.json();
  }
</script>

<button on:click={getList}>获取商品列表</button>

服务端代码（服务端load函数、API路由等） #

公开变量仍可从$env/static/public导入，私有敏感变量从$env/static/private导入，示例：

// +page.server.ts 示例
import { VITE_API_URL } from '$env/static/public';
import { SECRET_ADMIN_TOKEN } from '$env/static/private';

export async function load() {
  const res = await fetch(`${VITE_API_URL}/admin/data`, {
    headers: {
      Authorization: `Bearer ${SECRET_ADMIN_TOKEN}`
    }
  });
  return {
    adminData: await res.json()
  };
}

补充说明：如果你有运行时动态读取环境变量的需求，可以使用$env/dynamic/public和$env/dynamic/private模块，但编译时固定配置的场景下，静态环境变量是最优选择，性能更高且不存在运行时读取失败的问题。

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