ViteJS+TypeScript项目部署GitHub后模块脚本加载失败求助

问题核心原因 #

你遇到的MIME类型错误，本质是GitHub Pages服务器返回了text/html类型的内容（实际是404页面），而非脚本需要的application/javascript，根源是资源路径配置错误和部署了未打包的源码。

具体解决步骤 #

1. 修正Vite的base路径配置
   在vite.config.ts中添加对应GitHub Pages仓库的base路径：

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/你的仓库名称/', // 例如仓库是pogflix，就写'/pogflix/'
  // 其他原有配置
})

如果是用户个人站点（即username.github.io），base设为/即可。

2. 移除HTML中手动引入的源码资源
   你的HTML里手动写了./src/main.ts和./src/style.css的引用，这是开发环境的源码路径，但生产环境（GitHub Pages）需要的是Vite打包后的编译文件。Vite会在开发和打包阶段自动注入正确的资源引用，所以直接删除这两行：

<link href="./src/style.css" rel="stylesheet" />
<script type="module" src="./src/main.ts" defer></script>

3. 正确打包并部署dist目录

• 执行打包命令生成生产环境文件：

npm run build

• 部署dist目录到GitHub Pages：
  推荐用gh-pages工具自动部署，安装后配置脚本：

  npm install gh-pages --save-dev
  

  在package.json中添加：

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

  最后执行npm run deploy，工具会自动把dist内容推送到gh-pages分支，GitHub Pages会自动从该分支部署。

验证 #

部署完成后，访问你的GitHub Pages地址，检查控制台是否还有MIME错误，此时脚本应该能正常加载，应用功能可以正常使用。

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