TypeScript+Vite项目部署Github Pages遇MIME类型错误求助

错误原因 #

Github Pages是静态文件服务器，不会编译TypeScript/TSX源码。你当前部署的是项目源码，服务器将.tsx文件识别为application/octet-stream（二进制流），但浏览器要求模块脚本必须是正确的JavaScript MIME类型（如application/javascript），因此出现加载失败。

解决方案 #

1. 配置Vite的base路径 #

在项目根目录的vite.config.ts中添加base配置（替换为你的仓库名称），确保静态资源路径正确：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/your-repo-name/' // 示例：仓库名为my-ts-site则写'/my-ts-site/'
})

2. 构建生产环境资源 #

运行构建命令，生成编译后的静态文件：

npm run build

执行完成后，项目根目录会生成dist文件夹，里面是可直接部署的静态资源。

3. 部署dist目录到Github Pages #

推荐使用gh-pages工具简化部署流程：

• 安装依赖：

  npm install gh-pages --save-dev
  

• 在package.json中添加部署脚本：

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
  

• 执行部署命令：

  npm run deploy
  

  该命令会自动将dist目录的内容推送到仓库的gh-pages分支。

4. 确认Github Pages设置 #

进入仓库的Settings -> Pages页面，确认：

• Source选择gh-pages分支
• Folder选择/(root)

等待几分钟后，Github Pages会完成部署，此时访问页面即可正常加载。

补充说明 #

本地运行npm run dev时，Vite开发服务器会实时编译TSX文件并处理模块类型，因此不会出现问题。但部署到静态服务器时，必须使用构建后的产物，而非源码文件。

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