部署到Firebase时解决.svelte文件MIME类型检查问题

问题根源 #

本地运行正常但部署后出现Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"错误，本质是Firebase Hosting将JS模块请求错误识别为HTML请求，返回了错误的MIME类型，导致浏览器无法正确加载模块。

具体解决方案 #

• 修正firebase.json的重写规则
  单页应用常见的全路径重写会覆盖静态资源请求，导致JS模块被当成HTML处理。调整规则，优先匹配静态资源：

  {
    "hosting": {
      "public": "build",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        // 先处理静态资源，确保JS/CSS等文件返回正确MIME类型
        {
          "source": "**/*.{js,css,json,png,jpg,jpeg,gif,svg,ico}",
          "destination": "/$1"
        },
        // 剩余请求再重写为index.html，适配SPA路由
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

  注意：public字段要指向你的Svelte项目编译后的输出目录（通常是build或dist），不要指向源码目录。

• 验证编译产物与部署目录
  执行npm run build后，检查编译输出目录（如build）下的文件结构，确认App.svelte对应的编译后JS文件存在且路径正确。部署前确保firebase deploy是基于这个编译目录，而非源码。

• 清除缓存

  1. Firebase Hosting端缓存：在Firebase控制台的Hosting页面，找到「缓存存储」选项，手动清除缓存；或部署时执行firebase deploy --only hosting强制刷新。
  2. 浏览器端缓存：按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，避免本地缓存的旧资源干扰。

• 检查Svelte编译配置
  如果使用Vite构建，确保vite.config.js的build配置正确，比如指定正确的输出目录：

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [sveltekit()],
    build: {
      outDir: 'build', // 与firebase.json的public字段对应
      assetsDir: 'assets'
    }
  });
  

内容的提问来源于stack exchange，提问作者M.A.