在Svelte/SvelteKit中使用多.env文件的配置方法咨询

一、多环境.env文件的加载实现 #

SvelteKit继承了Vite的.env加载机制，同时支持通过MODE参数区分更细分的环境（比如你需要的dev、integration），无需额外插件，步骤如下：

1. 在项目根目录创建对应环境的.env文件：
   • .env：通用基础配置，所有环境都会加载
   • .env.dev：开发环境专属配置
   • .env.integration：集成测试环境专属配置
   • .env.production：生产环境专属配置
2. 在package.json中添加环境启动/构建脚本，通过MODE指定环境：

   {
     "scripts": {
       "dev": "vite dev", // 默认development环境，加载.env + .env.development
       "dev:dev": "MODE=dev vite dev", // 加载.env + .env.dev
       "dev:integration": "MODE=integration vite dev", // 加载.env + .env.integration
       "build:integration": "MODE=integration vite build", // 集成环境构建
       "build": "vite build" // 默认生产环境，加载.env + .env.production
     }
   }
   

   执行对应脚本即可加载指定环境的配置，比如运行npm run dev:integration就会加载.env和.env.integration的变量。

二、私有/公共/动态环境变量的定义与使用 #

SvelteKit将环境变量分为三类，定义位置均在上述.env文件中（动态变量除外）：

1. 私有环境变量（仅服务端可用） #

• 定义规则：变量名以PRIVATE_开头，比如PRIVATE_API_KEY=xxx123
• 使用场景：仅在服务端代码（+server.js、+page.server.js、hooks.server.js等）中访问，不会被暴露给客户端
• 使用方式：

  // +page.server.js
  import { PRIVATE_API_KEY } from '$env/static/private';
  
  export async function load() {
    const apiRes = await fetch('https://api.example.com/data', {
      headers: { Authorization: `Bearer ${PRIVATE_API_KEY}` }
    });
    return { data: await apiRes.json() };
  }
  

2. 公共环境变量（客户端+服务端可用） #

• 定义规则：变量名以PUBLIC_开头，比如PUBLIC_APP_URL=https://example.com
• 使用场景：需要在客户端组件中使用的配置，会被注入到客户端代码中
• 使用方式：

  <script>
    import { PUBLIC_APP_URL, PUBLIC_APP_NAME } from '$env/static/public';
  </script>
  
  <footer>
    访问我们：<a href={PUBLIC_APP_URL}>{PUBLIC_APP_NAME}</a>
  </footer>
  

3. 动态环境变量（运行时获取） #

• 定义位置：通常从系统环境变量读取，或在vite.config.js的kit.env中配置
• 使用场景：需要在运行时动态获取的变量（比如容器部署时传入的变量）
• 使用方式：
  • 客户端动态获取公共变量：

    import { env as publicEnv } from '$env/dynamic/public';
    console.log(publicEnv.PUBLIC_APP_URL);
    

  • 服务端动态获取私有变量：

    import { env as privateEnv } from '$env/dynamic/private';
    console.log(privateEnv.PRIVATE_API_KEY);
    

三、环境识别逻辑 #

SvelteKit通过NODE_ENV和MODE共同识别环境：

• NODE_ENV：区分development/production/test，决定构建模式（开发/生产），默认情况下：
  • 执行vite dev时NODE_ENV=development
  • 执行vite build时NODE_ENV=production
• MODE：用于区分更细分的环境（比如dev、integration），指定后会优先加载对应.env.[MODE]文件，且该文件中的变量会覆盖.env中的同名变量
• 优先级：.env.[MODE] > .env

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