Svelte静态站点路由页刷新后CSS样式加载失败求助

云上老周

2026-7-13

非首页路由刷新后CSS加载失败（MIME类型错误）

问题描述

网站从React迁移至Svelte，使用Svelte静态适配器构建，部署在HostGator主机
异常现象：初始加载所有页面CSS渲染正常，但在任意非首页路由页面点击刷新后，页面样式丢失
控制台报错：

The stylesheet https://tswmaps.com/game/_app/immutable/assets/0.7438fdf9.css was not loaded because its MIME type, “text/html”, is not “text/css”.

本地执行npm run dev无此问题，部署流程为npm run build后通过FTP上传build文件夹全部内容

原因分析与解决方法

1. 主机未配置SPA路由 fallback（最可能原因）

Svelte静态适配器生成的是单页应用（SPA），刷新非首页路由时，HostGator默认会返回404 HTML页面，而非指向应用的index.html，导致浏览器请求CSS文件时实际获取到的是HTML内容，从而触发MIME类型不匹配错误。

解决步骤：

在网站根目录创建或修改.htaccess文件
添加以下Apache重写规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

保存后上传至主机根目录，覆盖原有文件（若存在）

2. 静态资源基础路径配置错误

如果网站部署在子路径（如示例中的/game），需确认Svelte配置中是否正确设置了基础路径：

修改svelte.config.js：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: 'index.html'
    }),
    paths: {
      base: '/game', // 匹配你的实际部署子路径
    }
  }
};

export default config;