338 lines
6.7 KiB
Markdown
338 lines
6.7 KiB
Markdown
# MeshRay - MIME 类型错误快速解决指南
|
|
|
|
**最后更新**: 2026-03-24
|
|
**问题**: `Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html"`
|
|
|
|
---
|
|
|
|
## 🎯 **问题诊断**
|
|
|
|
### 当前状态检查
|
|
|
|
```bash
|
|
# 测试后端实际返回
|
|
curl.exe http://localhost:9531/assets/Dashboard-BMrerBTn.js -I
|
|
|
|
# 预期结果：
|
|
HTTP/1.1 200 OK
|
|
Content-Type: application/javascript; charset=utf-8 ✅
|
|
```
|
|
|
|
**如果看到上面的结果，说明后端已修复，问题是浏览器缓存！**
|
|
|
|
---
|
|
|
|
## ✅ **解决方案（按顺序执行）**
|
|
|
|
### 方案 1: 硬性重新加载（推荐）⭐
|
|
|
|
#### Chrome/Edge 浏览器：
|
|
|
|
1. **打开开发者工具**: 按 `F12`
|
|
2. **右键点击刷新按钮** 🔄
|
|
3. **选择**: "清空缓存并硬性重新加载"
|
|
|
|
|
|
|
|
---
|
|
|
|
### 方案 2: 禁用缓存（开发环境必备）⭐⭐⭐
|
|
|
|
#### 步骤：
|
|
|
|
1. **打开开发者工具**: `F12`
|
|
2. **进入 Network 标签**
|
|
3. **勾选**: ✅ `Disable cache`
|
|
|
|
**效果**:
|
|
- ✅ 每次访问都从服务器重新加载
|
|
- ✅ 不会使用任何缓存
|
|
- ✅ 开发调试必备
|
|
|
|
---
|
|
|
|
### 方案 3: 清除所有缓存数据
|
|
|
|
#### Chrome/Edge:
|
|
|
|
1. 按 `Ctrl + Shift + Delete`
|
|
2. 时间范围：**时间不限**
|
|
3. 勾选：
|
|
- ✅ 浏览历史记录
|
|
- ✅ Cookie 及其他网站数据
|
|
- ✅ 缓存的图片和文件
|
|
4. 点击 **"清除数据"**
|
|
|
|
---
|
|
|
|
### 方案 4: 使用隐私模式
|
|
|
|
#### 快捷键：
|
|
|
|
- **Chrome**: `Ctrl + Shift + N`
|
|
- **Edge**: `Ctrl + Shift + P`
|
|
|
|
**效果**:
|
|
- ✅ 不使用任何现有缓存
|
|
- ✅ 不保存新的缓存
|
|
- ✅ 适合测试
|
|
|
|
---
|
|
|
|
## 🔍 **验证方法**
|
|
|
|
### 步骤 1: 打开开发者工具
|
|
|
|
按 `F12` 打开
|
|
|
|
---
|
|
|
|
### 步骤 2: 检查 Network 标签
|
|
|
|
1. 进入 **Network** 标签
|
|
2. 刷新页面 (`F5`)
|
|
3. 找到 `Dashboard-BMrerBTn.js` 请求
|
|
4. 查看 **Size** 列：
|
|
|
|
**✅ 正常情况**:
|
|
```
|
|
Size: 15.2 kB (disk cache) ❌ 使用了缓存
|
|
Size: 15.2 kB ✅ 从服务器加载
|
|
```
|
|
|
|
---
|
|
|
|
### 步骤 3: 检查 Response Headers
|
|
|
|
点击 `Dashboard-BMrerBTn.js` 请求，查看 **Headers** 标签：
|
|
|
|
**✅ 正确响应**:
|
|
```http
|
|
HTTP/1.1 200 OK
|
|
Content-Type: application/javascript; charset=utf-8
|
|
```
|
|
|
|
**❌ 错误响应**:
|
|
```http
|
|
HTTP/1.1 200 OK
|
|
Content-Type: text/html; charset=utf-8
|
|
```
|
|
|
|
---
|
|
|
|
### 步骤 4: 检查 Console
|
|
|
|
进入 **Console** 标签：
|
|
|
|
**✅ 正常情况**:
|
|
```
|
|
无错误信息
|
|
```
|
|
|
|
**❌ 仍有问题**:
|
|
```javascript
|
|
Failed to load module script: Expected a JavaScript-or-Wasm module script
|
|
but the server responded with a MIME type of "text/html".
|
|
```
|
|
|
|
---
|
|
|
|
## 🛠️ **终极解决方案**
|
|
|
|
### 如果以上方法都无效：
|
|
|
|
#### 步骤 1: 完全关闭浏览器
|
|
|
|
```bash
|
|
# Windows: 确保所有浏览器进程都关闭
|
|
任务管理器 → 结束所有 Chrome/Edge 进程
|
|
```
|
|
|
|
---
|
|
|
|
#### 步骤 2: 删除缓存目录
|
|
|
|
**Windows**:
|
|
|
|
```powershell
|
|
# Chrome 缓存
|
|
Remove-Item -Recurse -Force "$env:LOCALAPPDATA\Google\Chrome\User Data\Default\Cache"
|
|
|
|
# Edge 缓存
|
|
Remove-Item -Recurse -Force "$env:LOCALAPPDATA\Microsoft\Edge\User Data\Default\Cache"
|
|
```
|
|
|
|
**⚠️ 警告**: 这会清除所有浏览器缓存！
|
|
|
|
---
|
|
|
|
#### 步骤 3: 重启服务
|
|
|
|
```bash
|
|
cd e:\Project\MeshRay
|
|
|
|
# 停止旧服务
|
|
Get-Process -Name "meshray*" -ErrorAction SilentlyContinue | Stop-Process -Force
|
|
|
|
# 清理编译缓存
|
|
go clean -cache
|
|
|
|
# 重新编译
|
|
go build -o meshray.exe -ldflags "-s -w -H=windowsgui" ./cmd/meshray
|
|
|
|
# 启动新服务
|
|
.\meshray.exe
|
|
```
|
|
|
|
---
|
|
|
|
#### 步骤 4: 重新启动浏览器
|
|
|
|
打开浏览器，访问 http://localhost:9531
|
|
|
|
---
|
|
|
|
## 📊 **问题排查流程图**
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[看到 MIME 类型错误] --> B{测试后端 API}
|
|
B -->|返回 text/html| C[❌ 后端路由顺序错误]
|
|
B -->|返回 application/javascript| D{检查浏览器缓存}
|
|
C --> E[修改 server.go 路由顺序]
|
|
E --> F[重新编译并重启服务]
|
|
F --> G[测试]
|
|
D -->|有缓存 | H[清除缓存]
|
|
D -->|无缓存 | I[检查其他问题]
|
|
H --> J[硬性重新加载]
|
|
J --> K{问题解决？}
|
|
K -->|否 | L[禁用缓存]
|
|
K -->|是 | M[✅ 成功]
|
|
L --> N[使用隐私模式]
|
|
N --> O[删除缓存目录]
|
|
O --> P[重启服务]
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 **预防措施**
|
|
|
|
### 开发环境配置
|
|
|
|
#### 1. 始终禁用缓存
|
|
|
|
**开发者工具 → Network → Disable cache** ✅
|
|
|
|
---
|
|
|
|
#### 2. 添加版本号
|
|
|
|
在前端 `index.html` 中添加版本参数：
|
|
|
|
```html
|
|
<script type="module" src="/assets/index.js?v=20260324"></script>
|
|
<link rel="stylesheet" href="/assets/style.css?v=20260324">
|
|
```
|
|
|
|
**效果**: 每次修改后强制浏览器重新加载
|
|
|
|
---
|
|
|
|
#### 3. 配置 Vite 开发服务器
|
|
|
|
`vite.config.js`:
|
|
|
|
```javascript
|
|
export default defineConfig({
|
|
server: {
|
|
headers: {
|
|
'Cache-Control': 'no-cache, no-store, must-revalidate'
|
|
}
|
|
},
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
// 添加 hash 到文件名
|
|
entryFileNames: `assets/[name]-[hash].js`,
|
|
chunkFileNames: `assets/[name]-[hash].js`,
|
|
assetFileNames: `assets/[name]-[hash].[ext]`
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 **检查清单**
|
|
|
|
完成以下检查确保问题解决：
|
|
|
|
- [ ] ✅ curl 测试返回 `application/javascript`
|
|
- [ ] ✅ 开发者工具 Network 中 Disable cache 已勾选
|
|
- [ ] ✅ 硬性重新加载执行成功
|
|
- [ ] ✅ Console 中无 MIME 类型错误
|
|
- [ ] ✅ 前端页面正常加载
|
|
- [ ] ✅ Vue 应用正常启动
|
|
- [ ] ✅ 所有 JS 文件正确加载
|
|
|
|
---
|
|
|
|
## 🎉 **成功案例**
|
|
|
|
### 正确的表现：
|
|
|
|
**Network 标签**:
|
|
```
|
|
Dashboard-BMrerBTn.js js 15.2 kB 200 OK application/javascript
|
|
```
|
|
|
|
**Console 标签**:
|
|
```
|
|
（无错误信息）
|
|
```
|
|
|
|
**页面显示**:
|
|
```
|
|
✅ Dashboard 统计卡片正常显示
|
|
✅ Network 列表数据完整
|
|
✅ 所有组件正常渲染
|
|
```
|
|
|
|
---
|
|
|
|
## 📚 **相关文档**
|
|
|
|
- [字段命名修复验证报告.md](./字段命名修复验证报告.md) - DTO 字段修复
|
|
- [静态文件 MIME 类型问题修复.md](./静态文件 MIME 类型问题修复.md) - 后端路由修复
|
|
- [Go Embed 静态资源嵌入最佳实践.md](./Go Embed 静态资源嵌入最佳实践.md) - embed 配置
|
|
|
|
---
|
|
|
|
## 💡 **快速命令参考**
|
|
|
|
### 测试后端：
|
|
```bash
|
|
curl.exe http://localhost:9531/assets/Dashboard-BMrerBTn.js -I
|
|
```
|
|
|
|
### 重启服务：
|
|
```bash
|
|
Get-Process meshray* | Stop-Process -Force
|
|
go build -o meshray.exe -ldflags "-s -w -H=windowsgui" ./cmd/meshray
|
|
.\meshray.exe
|
|
```
|
|
|
|
### 清除缓存（PowerShell）：
|
|
```powershell
|
|
Remove-Item -Recurse -Force "$env:LOCALAPPDATA\Google\Chrome\User Data\Default\Cache"
|
|
```
|
|
|
|
---
|
|
|
|
**状态**: ✅ **后端已修复，请清除浏览器缓存**
|
|
**根本原因**: 浏览器缓存了旧的路由响应（HTML）
|
|
**解决方法**: 清除缓存或禁用缓存
|
|
|
|
*MeshRay - 坚持不懈，直到完美！* ✨🔧
|