SvelteKit部署GitHub Pages仅显示HTML，JS/CSS加载失败求助

核心问题分析 #

你遇到的问题本质是生产环境下资源路径生成错误，结合控制台的多余斜杠报错，大概率是paths.base配置未正确生效、动态路由跳转路径拼接失误，或是部署环节的环境/配置遗漏导致的。以下是针对性的解决步骤：

1. 确保paths.base在生产构建时动态生效 #

检查svelte.config.js，必须根据环境变量动态设置paths.base，避免硬编码导致开发/生产环境路径冲突：

import adapter from '@sveltejs/adapter-static';

const dev = process.env.NODE_ENV === 'development';

export default {
  kit: {
    adapter: adapter({
      fallback: 'index.html' // 关键：动态路由必须配置fallback，否则GitHub Pages无法处理路由跳转
    }),
    paths: {
      base: dev ? '' : '/jonasfroeller'
    }
  }
};

同时确认package.json的build命令是生产环境构建：

{
  "scripts": {
    "build": "NODE_ENV=production vite build"
  }
}

构建时必须执行npm run build，不能用开发环境命令，否则paths.base不会切换到生产路径，导致资源请求出现多余斜杠。

2. 修复动态路由跳转的路径拼接逻辑 #

你的[lang]动态路由自动跳转逻辑可能存在手动拼接路径的错误，比如多写了斜杠。检查根目录的+page.server.js或+layout.server.js中的重定向代码：

• 错误示例（多斜杠）：

return redirect(302, `//en`);

• 正确示例（单斜杠拼接）：

import { redirect } from '@sveltejs/kit';

export function load({ url }) {
  // 避免手动拼接，用url对象生成正确路径
  if (!url.pathname.startsWith('/en') && !url.pathname.startsWith('/de')) {
    return redirect(302, `${url.pathname}/en`);
  }
}

3. 修正GitHub Pages部署Action配置 #

确保部署Action明确设置生产环境变量，且正确指向构建产物目录。以peaceiris/actions-gh-pages为例：

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build for production
        run: npm run build
        env:
          NODE_ENV: production # 强制设置生产环境，确保paths.base生效
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build # adapter-static默认输出目录，若自定义需修改
          force_orphan: true

4. 确认.nojekyll文件的正确位置 #

将.nojekyll文件放在项目的static目录下，这样构建时会自动复制到build目录，避免GitHub Pages用Jekyll处理路径导致资源请求异常。若手动放在build目录，会被后续构建覆盖，无法生效。

5. 本地预验证生产构建产物 #

执行npm run build后，查看build目录下的index.html，检查JS/CSS资源路径是否为/jonasfroeller/_app/immutable/...格式。如果本地构建后的路径就存在多余斜杠，说明问题出在代码/配置，而非部署环节，需重新排查路由或路径生成逻辑。

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