SvelteKit部署Firebase遇SSR问题：页面显示模板占位符

问题原因 #

页面显示%sveltekit.head% %sveltekit.body%是因为Firebase Hosting未正确加载SvelteKit的构建产物，当前配置存在两个核心问题：

• firebase.json中hosting.public指向了源码目录src，而非SvelteKit构建后的产物目录
• 使用的adapter-auto在Firebase环境下无法生成适配Hosting的正确资源

另外需要明确：Firebase Hosting本身是静态托管服务，原生不支持SSR，如果需要SSR必须配合Firebase Functions运行SvelteKit的后端渲染逻辑；如果不需要SSR，可直接部署纯静态/客户端渲染版本。

方案1：纯静态/客户端渲染部署（无需Firebase Functions） #

适合不需要SSR的场景，步骤如下：

1. 安装静态适配包：

   npm install @sveltejs/adapter-static --save-dev
   

2. 修改svelte.config.js，替换为静态适配器并配置：

   import adapter from '@sveltejs/adapter-static';
   import { vitePreprocess } from '@sveltejs/kit/vite';
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
       preprocess: vitePreprocess(),
       kit: {
           adapter: adapter({
               // SPA模式下设置fallback，确保路由正常工作
               fallback: 'app.html'
           })
           // 若需预渲染所有页面，可添加：
           // prerender: { entries: ['*'] }
       }
   };
   
   export default config;
   

3. 构建项目：

   npm run build
   

4. 修改firebase.json的Hosting配置，将public指向构建后的build目录：

   {
     "hosting": {
       "public": "build",
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "rewrites": [ {
         "source": "**",
         "destination": "/app.html"
       } ]
     },
     // 保留原有firestore、storage、emulators配置
   }
   

5. 部署到Firebase：

   firebase deploy --only hosting
   

方案2：SSR部署（需要Firebase Functions） #

如果需要SSR功能，必须通过Firebase Functions承载SvelteKit的渲染逻辑，步骤如下：

1. 安装Firebase适配包：

   npm install svelte-adapter-firebase --save-dev
   

2. 修改svelte.config.js，配置适配器：

   import adapter from 'svelte-adapter-firebase';
   import { vitePreprocess } from '@sveltejs/kit/vite';
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
       preprocess: vitePreprocess(),
       kit: {
           adapter: adapter({
               region: "asia-east1" // 和firebase.json中的region保持一致
           })
       }
   };
   
   export default config;
   

3. 构建项目，自动生成Firebase Functions所需代码：

   npm run build
   

4. 修改firebase.json的Hosting配置，将所有请求转发到Functions：

   {
     "hosting": {
       "public": "build",
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "rewrites": [ {
         "source": "**",
         "function": "handler"
       } ],
       "frameworksBackend": {
         "region": "asia-east1"
       }
     },
     // 保留原有配置
   }
   

5. 部署Functions和Hosting：

   firebase deploy --only hosting,functions
   

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