如何在GitHub Pages部署ViteJS项目？部署后MIME类型报错求助

问题原因 #

GitHub Pages默认无法正确识别.jsx文件作为JavaScript模块，返回了text/jsx的MIME类型，不符合浏览器对模块脚本的规范要求，导致加载失败。

修复步骤 #

1. 配置Vite打包输出为标准JS文件 #

在项目根目录的vite.config.js（或vite.config.ts）中，修改打包配置，确保编译后的文件后缀为.js，避免输出.jsx文件：

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

export default defineConfig({
  plugins: [react()],
  // 配置GitHub Pages对应的仓库路径
  base: '/intro/',
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  }
})

2. 重新生成打包文件 #

删除项目根目录的dist文件夹，执行打包命令重新构建：

npm run build

3. 重新部署到GitHub Pages #

如果使用gh-pages工具部署，确认package.json中的部署脚本指向dist目录：

{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

执行命令重新部署：

npm run deploy

4. 备选：添加MIME类型映射 #

如果上述方法无效，在dist目录下创建_headers文件，强制指定JS文件的MIME类型：

/*
  Content-Type: application/javascript

同时在项目根目录创建.nojekyll文件（避免GitHub Pages忽略特殊命名的文件夹），再重新部署。

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