Firebase Hosting部署SvelteKit静态应用后仅渲染HTML无CSS/JS执行

1. 调整目录结构避免冲突 #

你当前把SvelteKit编译输出和Firebase的public目录混在一起，容易导致资源路径解析混乱。修改配置分离两个目录：

修改svelte.config.js的adapter配置： #

adapter: adapter({
    pages: 'build',
    assets: 'build',
    fallback: 'index.html',
    precompress: false
}),

修改firebase.json的public目录： #

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ]
  }
}

2. 确保资源路径为绝对路径 #

检查部署后HTML源码中的JS/CSS引用，必须是绝对路径（如/assets/main.xxx.js）。如果是相对路径，在rewrite规则下会加载错误资源。

在svelte.config.js中明确设置base路径：

kit: {
    paths: {
        base: '' // 根域名部署时留空，若部署在子路径则填对应路径
    },
    // ... 其他配置
}

3. 重新编译并部署 #

执行完整的编译和部署流程：

npm run build
firebase deploy --only hosting

4. 排查浏览器控制台错误 #

打开浏览器开发者工具的控制台，查看是否有JS执行错误或资源加载报错：

• 如果是模块加载错误，说明资源路径不正确，回到步骤2调整base路径
• 如果是权限错误，检查Firebase Hosting的安全规则是否限制了资源访问

5. 强制刷新Firebase缓存 #

如果是旧缓存导致的问题，部署时强制刷新：

firebase deploy --only hosting --force

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