Vite+Vue部署GitHub Pages遇MIME错误及页面空白问题求助

1. 核心问题分析 #

出现「加载模块“website.js”因不被允许的MIME类型（“text/html”）」错误，本质是资源路径错误导致服务器返回404页面，浏览器误将HTML内容当作JS解析，触发MIME类型校验失败，这也是页面空白的直接原因。

2. vite.config.ts 配置修复 #

你的配置存在两个关键问题：

• rollupOptions.external 配置错误：将本地静态资源标记为外部依赖，会导致构建时这些资源不会被打包到dist目录，GitHub Pages无法找到资源，进而引发路径连锁错误。
• base配置本身符合要求（匹配你的GitHub Pages路径https://jasperorens.github.io/WalnutCoding/），但需配合正确的资源打包逻辑才能生效。

修改后的完整配置：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: '/WalnutCoding/',
  build:{
    rollupOptions:{
      // 移除external配置，本地静态资源必须被打包进dist目录
    }
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  }
})

3. 重新部署验证步骤 #

1. 重新执行构建：运行npm run build，确保dist目录生成完整的资源文件（包含assets文件夹及对应图片、JS/CSS文件）
2. 推送更新到gh-pages分支：

   git add walnutcoding/dist -f
   git commit -m"fix: bundle static assets correctly"
   git subtree push --prefix walnutcoding/dist origin gh-pages
   

3. 等待GitHub Pages部署完成（通常1-5分钟），然后强制刷新页面（Ctrl+F5）清除浏览器缓存

4. 额外排查点 #

• 本地验证：用npx serve dist启动本地服务，确认页面能正常显示，排除构建本身的问题
• 检查gh-pages分支：确认dist目录的所有文件都被推送到该分支的根目录，没有嵌套层级
• 检查GitHub Pages设置：确认部署源为gh-pages分支的/root目录

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