Svelte框架：在运行时向客户端代码包传递环境变量

运行时向Svelte客户端传递环境变量的方案 #

嘿，恭喜你完成第一个Svelte应用！关于运行时把环境变量传到客户端脚本的问题，我给你整理几种实用的方案，适配不同的Svelte项目场景：

1. SvelteKit（基于Vite）的实现方式 #

如果用的是SvelteKit，我们可以通过服务器端的加载函数把变量传递到页面，再挂载到全局供客户端脚本使用：

• 首先在根布局的服务器加载文件（+layout.server.js）中获取环境变量并返回：

  // +layout.server.js
  export async function load() {
    // 这里可以从Hapi后端接口获取，或者直接读取服务器的环境变量
    const runtimeConfig = {
      apiUrl: process.env.HAPI_API_URL,
      appName: process.env.APP_NAME
    };
    return { runtimeConfig };
  }
  

• 接着在根布局组件（+layout.svelte）里把变量挂载到window对象：

  <script>
    export let data;
    // 将运行时配置挂载到全局，客户端脚本就能直接访问
    window.appRuntimeEnv = data.runtimeConfig;
  </script>
  
  <slot />
  

• 之后在任何客户端组件或脚本里，就可以直接用window.appRuntimeEnv.apiUrl来获取变量了。

2. 传统Svelte + Hapi.js的模板注入方式 #

这和你之前用Pug的思路很像，我们可以在Hapi渲染Svelte打包后的HTML页面时，直接把环境变量注入到页面的全局脚本中：

• 如果你用Pug作为Hapi的模板引擎，可以在模板里直接插值：

  html
    head
      title My Svelte App
      script.
        // 注入全局环境变量
        window.appEnv = {
          apiUrl: '#{process.env.API_URL}',
          debugMode: !{process.env.DEBUG === 'true'}
        };
    body
      div#app
      script src="/bundle.js" <!-- 你的Svelte打包脚本 -->
  

• 这样当Hapi渲染页面时，会把服务器的环境变量替换到脚本里，Svelte代码里就能直接通过window.appEnv访问这些变量。

重要提醒 #

• 绝对不要把敏感信息传到客户端！比如API密钥、数据库密码这类数据，必须留在服务器端处理，浏览器里的任何代码都是公开可查的。
• 如果你的变量是构建时就能确定的，Vite支持用VITE_前缀的环境变量（比如VITE_API_URL），直接在代码里用import.meta.env.VITE_API_URL即可，但这是构建时静态替换的，不属于运行时动态传递的范畴。

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