SvelteKit中如何创建全局变量？解决app.html无法导入问题

因为app.html是静态模板文件，不支持ES模块导入语法，所以没法直接在里面导入环境变量或其他模块。这里给你两个简单可行的方案：

方案一：直接在app.html中注入公共环境变量 #

SvelteKit允许在app.html里通过%env.PUBLIC_XXX%的模板语法直接引用公共环境变量（变量名必须以PUBLIC_开头，确保不会泄露敏感信息）。

1. 先在项目根目录的.env文件中定义Facebook应用ID：

PUBLIC_FB_APP_ID=你的FB应用ID

2. 修改app.html中的代码：

<body data-sveltekit-preload-data="hover">
  <script type="module">
    window.fbAsyncInit = function() {
      // 直接用模板注入的环境变量
      window.FB.init({
        appId            : '%env.PUBLIC_FB_APP_ID%',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v18.0'
      });
      // 把FB挂载到你的全局对象上
      window.myGlobalObject = window.myGlobalObject || {};
      window.myGlobalObject.FB = window.FB;
    };
  </script>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>

方案二：通过页面布局脚本挂载全局变量 #

如果需要更灵活的处理（比如动态获取变量），可以在SvelteKit的根布局文件中把变量挂载到window对象上，再在app.html中引用：

1. 在src/routes/+layout.ts（或.js）中添加代码：

import { PUBLIC_FB_APP_ID } from '$env/static/public';

export const load = () => {
  // 确保在浏览器环境下才挂载到window
  if (typeof window !== 'undefined') {
    window.FB_APP_ID = PUBLIC_FB_APP_ID;
  }
  return {};
};

2. 修改app.html中的脚本：

<body data-sveltekit-preload-data="hover">
  <script type="module">
    window.fbAsyncInit = function() {
      window.FB.init({
        appId            : window.FB_APP_ID,
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v18.0'
      });
      window.myGlobalObject = window.myGlobalObject || {};
      window.myGlobalObject.FB = window.FB;
    };
  </script>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>

注意事项 #

• 只有以PUBLIC_开头的环境变量才能被前端访问，不要把私钥之类的敏感信息放到这类变量里。
• Facebook SDK的初始化脚本要确保在sdk.js之前定义fbAsyncInit，这样SDK加载完成后会自动调用这个函数。

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