如何在SvelteKit中正确定义并使用BASE_URL环境变量？

核心原因 #

Svelte Kit对客户端可访问的公共环境变量有强制命名规则：必须以PUBLIC_作为前缀。你当前定义的DEV_BASE_URL和PROD_BASE_URL不符合该规则，因此无法通过$env/dynamic/public读取到。

规范解决步骤 #

1. 配置环境变量 #

推荐通过分环境文件实现开发/生产环境的变量区分，更清晰易维护：

• 创建.env.development（开发环境）：

  PUBLIC_BASE_URL="http://127.0.0.1:8080"
  

• 创建.env.production（生产环境）：

  PUBLIC_BASE_URL="https://example.com"
  

Svelte Kit会自动根据运行环境加载对应文件：启动开发服务时加载.env.development，生产构建时加载.env.production。

若不想分文件，也可在单个.env文件中通过NODE_ENV判断，但分文件方案更直观。

2. 在组件中读取变量 #

优先使用静态导入（编译时注入，性能更优），代码示例：

<script>
  import { PUBLIC_BASE_URL } from '$env/static/public';
  console.log('当前BASE_URL:', PUBLIC_BASE_URL);
</script>

如果需要运行时动态读取，可使用动态导入：

<script>
  import { env } from '$env/dynamic/public';
  console.log('当前BASE_URL:', env.PUBLIC_BASE_URL);
</script>

3. 验证生效 #

• 开发环境：执行npm run dev，控制台会输出http://127.0.0.1:8080
• 生产环境：执行npm run build后启动服务，控制台会输出https://example.com

注意事项 #

• 无PUBLIC_前缀的变量属于私有环境变量，仅能在服务端代码（如+page.server.js、+server.js）中读取，不能在客户端组件中使用。
• 务必将.env、.env.development、.env.production添加到.gitignore，避免敏感信息泄露。

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