zkcoi/Meshray-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
zkcoi
2026-06-30 15:14:37 +08:00
commit 15dab96872
311 changed files with 95639 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/前端 MIME 类型问题 - 最终解决方案.md
+415
View File
@@ -0,0 +1,415 @@
# MeshRay 前端 MIME 类型问题 - 最终解决方案
**最后更新**: 2026-03-24
**问题状态**: ✅ **已修复**
**根本原因**: 浏览器缓存 + 路由顺序错误（已修复）
---
## 🎯 **问题症状**
### 浏览器报错
```javascript
Failed to load module script: Expected a JavaScript-or-Wasm module script
but the server responded with a MIME type of "text/html".
Strict MIME type checking is enforced for module scripts per HTML spec.
```
```javascript
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module:
http://localhost:9531/assets/Dashboard-BMrerBTn.js
```
---
## ✅ **已修复内容**
### 1. 路由注册顺序（server.go:117-160）
**修复前**（错误）:
```go
// ❌ NoRoute 在 StaticFS 之前
s.engine.NoRoute(...)
s.engine.StaticFS("/assets", httpFS) // ← 永远不会执行
```
**修复后**（正确）:
```go
// ✅ StaticFS 在 NoRoute 之前
s.engine.StaticFS("/assets", httpFS) // ← 高优先级
s.engine.StaticFS("/static", httpFS)
s.engine.NoRoute(...) // ← 低优先级
```
---
### 2. Windows GUI 编译参数
**编译命令**:
```bash
go build -o meshray.exe -ldflags "-s -w -H=windowsgui" ./cmd/meshray
```
**效果**:
- ✅ 无控制台窗口
- ✅ 文件体积优化（约 31 MB）
- ✅ 系统托盘正常
---
## 🔧 **立即生效的步骤**
### Step 1: 停止旧服务
```bash
Get-Process -Name "meshray*" -ErrorAction SilentlyContinue | Stop-Process -Force
```
---
### Step 2: 重新编译（包含所有修复）
```bash
cd e:\Project\MeshRay
# 清理缓存
go clean -cache
# 编译（包含路由顺序修复 + GUI 配置）
go build -o meshray.exe -ldflags "-s -w -H=windowsgui" ./cmd/meshray
```
**预期输出**:
```
✅ 编译成功
✅ 文件大小：约 31 MB
✅ 无控制台窗口配置
```
---
### Step 3: 清除浏览器缓存 ⚠️ **关键步骤**
#### **方法 A: Chrome/Edge 开发者工具**
1. 按 `F12` 打开开发者工具
2. 右键点击刷新按钮🔄
3. 选择 **"清空缓存并硬性重新加载"**
或者：
1. 按 `Ctrl + Shift + Delete`
2. 选择 **"缓存的图片和文件"**
3. 点击 **"清除数据"**
---
#### **方法 B: 禁用缓存（开发环境推荐）**
1. 按 `F12` 打开开发者工具
2. 进入 **Network** 标签
3. ✅ 勾选 **"Disable cache"**
**效果**: 每次访问都从服务器重新加载
---
#### **方法 C: 使用隐私模式**
- Chrome: `Ctrl + Shift + N`
- Edge: `Ctrl + Shift + P`
**效果**: 不使用任何缓存
---
### Step 4: 启动新服务
```bash
.\meshray.exe
```
**验证**:
- ✅ 没有控制台窗口弹出
- ✅ 系统托盘出现图标
- ✅ 访问 http://localhost:9531
---
## 🧪 **验证测试**
### 测试 1: 检查 JS 文件 MIME 类型
**PowerShell**:
```bash
curl.exe http://localhost:9531/assets/Dashboard-BMrerBTn.js -I | Select-String "Content-Type"
```
**预期结果**:
```
Content-Type: application/javascript; charset=utf-8 ✅
```
**❌ 错误结果**:
```
Content-Type: text/html; charset=utf-8 ❌
```
---
### 测试 2: 检查 JS 文件内容
**PowerShell**:
```bash
curl.exe http://localhost:9531/assets/Dashboard-BMrerBTn.js | Select-String -Pattern "export|import" | Select-Object -First 1
```
**预期结果**:
```javascript
import{j as a,t as e,...}from"..."; ✅
```
**❌ 错误结果**:
```html
<!DOCTYPE html> ❌
```
---
### 测试 3: 浏览器控制台检查
1. 访问 http://localhost:9531
2. 按 `F12` 打开控制台
3. 查看 **Console** 标签
**✅ 正常情况**:
- 无 MIME 类型错误
- 页面正常加载
- Vue 应用启动成功
**❌ 异常情况**:
- 仍然报 MIME 类型错误
- 页面空白
- 大量红色错误
**解决**: 返回 Step 3，彻底清除浏览器缓存
---
## 📊 **问题诊断流程**
```mermaid
graph TD
A[访问前端报错] --> B{检查 Content-Type}
B -->|text/html| C[❌ 路由顺序错误]
B -->|application/javascript| D{清除浏览器缓存}
D -->|未清除 | E[❌ 缓存问题]
D -->|已清除 | F[✅ 问题解决]
C --> G[修改 server.go]
G --> H[重新编译]
H --> I[重启服务]
I --> D
```
---
## 🐛 **常见错误与解决**
### Q1: 编译后仍然是 text/html
**可能原因**:
1. ❌ 忘记重新编译
2. ❌ 运行了旧版本
3. ❌ server.go 修改未保存
**解决**:
```bash
# 确认修改已保存
code e:\Project\MeshRay\internal\api\server.go
# 停止旧服务
Get-Process meshray* | Stop-Process -Force
# 清理并重新编译
go clean -cache
go build -o meshray.exe -ldflags "-s -w -H=windowsgui" ./cmd/meshray
# 验证编译产物
ls meshray.exe
# 应该约 31 MB
```
---
### Q2: 清除缓存后仍然报错
**可能原因**:
1. ❌ Service Worker 缓存
2. ❌ CDN 缓存
3. ❌ DNS 缓存
**解决**:
**清除 Service Worker**:
```javascript
// 在浏览器控制台执行
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
registration.unregister()
}
})
```
**清除 DNS 缓存** (Windows):
```bash
ipconfig /flushdns
```
---
### Q3: 从命令行运行显示控制台窗口
**现象**:
```bash
.\meshray.exe
# 显示控制台窗口
```
**原因**: 程序继承了 PowerShell 的控制台
**解决**:
- ✅ **双击运行** `meshray.exe`（不要从命令行运行）
- ✅ 或者使用 `start` 命令：
```bash
start meshray.exe
```
---
## 📝 **检查清单**
完成以下检查确保一切正常：
- [ ] ✅ server.go 中 StaticFS 在 NoRoute 之前
- [ ] ✅ 使用 `-H=windowsgui` 参数编译
- [ ] ✅ meshray.exe 大小约 31 MB
- [ ] ✅ 双击运行无控制台窗口
- [ ] ✅ 系统托盘图标正常
- [ ] ✅ curl 测试返回 application/javascript
- [ ] ✅ 浏览器清除缓存
- [ ] ✅ 前端页面无 MIME 类型错误
- [ ] ✅ Vue 应用正常启动
---
## 🎯 **预防措施**
### 1. 添加编译脚本
创建 `build-fixed.bat`:
```batch
@echo off
echo 编译固定路由顺序的 GUI 版本...
go build -o meshray.exe -ldflags "-s -w -H=windowsgui" ./cmd/meshray
if %ERRORLEVEL% EQU 0 (
echo ✅ 编译成功!
echo 文件：meshray.exe
for %%I in (meshray.exe) do echo 大小：%%~zI 字节
) else (
echo ❌ 编译失败!
)
pause
```
---
### 2. 添加 VSCode Task
`.vscode/tasks.json`:
```json
{
"version": "2.0.0",
"tasks": [
{
"label": "Build Windows GUI (Fixed)",
"type": "shell",
"command": "go build",
"args": [
"-o",
"meshray.exe",
"-ldflags",
"-s -w -H=windowsgui",
"./cmd/meshray"
],
"group": "build"
}
]
}
```
**使用**: `Ctrl+Shift+B` → 选择 "Build Windows GUI (Fixed)"
---
### 3. 添加 Git Hook
`.git/hooks/pre-commit`:
```bash
#!/bin/bash
# 检查路由顺序是否正确
if grep -q "StaticFS.*NoRoute" internal/api/server.go; then
echo "❌ 路由顺序错误！StaticFS 必须在 NoRoute 之前"
exit 1
fi
echo "✅ 路由顺序检查通过"
exit 0
```
---
## 📚 **相关文档**
- [静态文件 MIME 类型问题修复.md](./静态文件 MIME 类型问题修复.md) - 详细技术分析
- [路由注册顺序检查清单.md](./路由注册顺序检查清单.md) - 防止再犯
- [README-Windows-GUI.md](./README-Windows-GUI.md) - GUI 编译指南
---
## ✅ **最终状态**
**修复完成后的表现**:
1. ✅ **后端**:
- StaticFS 在 NoRoute 之前
- JS 文件返回 `application/javascript`
- CSS 文件返回 `text/css`
- HTML 文件返回 `text/html`
2. ✅ **前端**:
- 无 MIME 类型错误
- Vue 应用正常启动
- 页面正常显示
3. ✅ **用户体验**:
- 双击运行无控制台窗口
- 系统托盘图标正常
- 文件体积优化到 31 MB
---
## 🎉 **总结**
**问题根源**:
- Gin 路由注册顺序错误（已修复）
- 浏览器缓存旧响应（需手动清除）
**解决方案**:
- 修改 server.go 路由顺序
- 使用正确参数重新编译
- 清除浏览器缓存
**状态**: ✅ **完全修复，可以放心使用！**
*MeshRay - 从错误中学习，让系统更完善！* ✨🔧