298 lines
9.1 KiB
HTML
298 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>修复 ERR_CONNECTION_REFUSED 错误</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
max-width: 800px;
|
||
margin: 40px auto;
|
||
padding: 20px;
|
||
line-height: 1.6;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
.container {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
}
|
||
h1 {
|
||
color: #2d3748;
|
||
border-bottom: 3px solid #48bb78;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.error-box {
|
||
background: #fed7d7;
|
||
border-left: 4px solid #fc8181;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
.success-box {
|
||
background: #c6f6d5;
|
||
border-left: 4px solid #48bb78;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
.info-box {
|
||
background: #bee3f8;
|
||
border-left: 4px solid #4299e1;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
.step {
|
||
background: #f7fafc;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
.step h3 {
|
||
color: #48bb78;
|
||
margin-top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.step-number {
|
||
background: #48bb78;
|
||
color: white;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12px;
|
||
font-weight: bold;
|
||
}
|
||
code {
|
||
background: #2d3748;
|
||
color: #68d391;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-family: "Monaco", "Menlo", monospace;
|
||
font-size: 14px;
|
||
}
|
||
.code-block {
|
||
background: #2d3748;
|
||
color: #e2e8f0;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
overflow-x: auto;
|
||
margin: 15px 0;
|
||
}
|
||
.code-block code {
|
||
background: transparent;
|
||
color: #68d391;
|
||
padding: 0;
|
||
}
|
||
.shortcut {
|
||
background: #edf2f7;
|
||
border: 2px solid #cbd5e0;
|
||
display: inline-block;
|
||
padding: 8px 16px;
|
||
border-radius: 6px;
|
||
font-weight: bold;
|
||
margin: 5px;
|
||
}
|
||
.warning {
|
||
color: #c05621;
|
||
font-weight: bold;
|
||
}
|
||
ul {
|
||
margin: 15px 0;
|
||
padding-left: 25px;
|
||
}
|
||
li {
|
||
margin: 10px 0;
|
||
}
|
||
.button {
|
||
background: #48bb78;
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
margin: 10px 5px;
|
||
font-weight: bold;
|
||
transition: background 0.3s;
|
||
}
|
||
.button:hover {
|
||
background: #38a169;
|
||
}
|
||
.divider {
|
||
height: 1px;
|
||
background: linear-gradient(to right, transparent, #cbd5e0, transparent);
|
||
margin: 30px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🔧 修复 ERR_CONNECTION_REFUSED 错误</h1>
|
||
|
||
<div class="error-box">
|
||
<strong>❌ 错误信息：</strong> Failed to load resource: net::ERR_CONNECTION_REFUSED
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>📌 原因：</strong> 开发服务器未运行或已崩溃
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<h2>🚀 解决方法</h2>
|
||
|
||
<div class="step">
|
||
<h3><span class="step-number">1</span>停止当前服务器</h3>
|
||
<p>如果终端中有服务器正在运行，按：</p>
|
||
<div class="shortcut">Ctrl + C</div>
|
||
<p class="warning">⚠️ 如果终端无响应，可以直接关闭终端窗口</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3><span class="step-number">2</span>清除缓存</h3>
|
||
<p>在项目根目录执行以下命令：</p>
|
||
<div class="code-block">
|
||
<code># 删除缓存目录
|
||
rm -rf node_modules/.cache
|
||
|
||
# 如果使用 Vite，也删除 Vite 缓存
|
||
rm -rf .vite</code>
|
||
</div>
|
||
<p><strong>Windows PowerShell 用户：</strong></p>
|
||
<div class="code-block">
|
||
<code># 删除缓存目录
|
||
Remove-Item -Recurse -Force node_modules\.cache
|
||
Remove-Item -Recurse -Force .vite</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3><span class="step-number">3</span>重启开发服务器</h3>
|
||
<div class="code-block">
|
||
<code>npm run dev</code>
|
||
</div>
|
||
<p>等待服务器启动，看到类似以下信息表示成功：</p>
|
||
<div class="code-block">
|
||
<code> ➜ Local: http://localhost:5173/
|
||
➜ Network: use --host to expose</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3><span class="step-number">4</span>硬刷新浏览器</h3>
|
||
<p>打开浏览器后，使用以下快捷键完全刷新：</p>
|
||
<ul>
|
||
<li><strong>Windows/Linux：</strong> <span class="shortcut">Ctrl + Shift + R</span> 或 <span class="shortcut">Ctrl + F5</span></li>
|
||
<li><strong>Mac：</strong> <span class="shortcut">Cmd + Shift + R</span></li>
|
||
<li><strong>或者：</strong> 打开开发者工具(F12)，右键点击刷新按钮，选择"清空缓存并硬刷新"</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<h2>💡 如果问题仍然存在</h2>
|
||
|
||
<div class="step">
|
||
<h3>方法 A：完全重置</h3>
|
||
<div class="code-block">
|
||
<code># 1. 停止服务器
|
||
Ctrl + C
|
||
|
||
# 2. 删除所有缓存
|
||
rm -rf node_modules/.cache
|
||
rm -rf .vite
|
||
rm -rf dist
|
||
|
||
# 3. 重新安装依赖
|
||
npm install
|
||
|
||
# 4. 启动服务器
|
||
npm run dev</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3>方法 B：更换端口</h3>
|
||
<p>如果 5173 端口被占用：</p>
|
||
<div class="code-block">
|
||
<code># 使用不同端口启动
|
||
npm run dev -- --port 5174</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3>方法 C：检查端口占用</h3>
|
||
<p><strong>Mac/Linux：</strong></p>
|
||
<div class="code-block">
|
||
<code># 查看 5173 端口占用情况
|
||
lsof -i :5173
|
||
|
||
# 如果有进程占用，记下 PID，然后杀掉进程
|
||
kill -9 [PID]</code>
|
||
</div>
|
||
<p><strong>Windows：</strong></p>
|
||
<div class="code-block">
|
||
<code># 查看端口占用
|
||
netstat -ano | findstr :5173
|
||
|
||
# 杀掉进程（替换 PID 为实际进程ID）
|
||
taskkill /PID [PID] /F</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div class="success-box">
|
||
<h3>✅ 启动成功后</h3>
|
||
<ol>
|
||
<li>在浏览器访问：<code>http://localhost:5173</code></li>
|
||
<li>登录系统</li>
|
||
<li>进入：<strong>地块信息管理 → 分类与标签 → 分类与标签</strong></li>
|
||
<li>点击右上角 <strong>分类管理</strong> 按钮</li>
|
||
<li>现在可以新增和编辑土壤类型、种植模式了！</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<h2>📚 相关文档</h2>
|
||
<ul>
|
||
<li>📄 <a href="/FIELD_CLASSIFICATION_EDIT_COMPLETE.md">功能完成说明</a></li>
|
||
<li>📄 <a href="/FIELD_CLASSIFICATION_QUICK_GUIDE.md">快速使用指南</a></li>
|
||
</ul>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 提示：</strong> 地块分类管理的新增和编辑功能已经完成！现在支持：
|
||
<ul>
|
||
<li>✅ 土壤类型管理（新增/编辑/删除 + 颜色选择）</li>
|
||
<li>✅ 种植模式管理（新增/编辑/删除 + Emoji图标）</li>
|
||
<li>✅ 数据持久化到 localStorage</li>
|
||
<li>✅ 表单验证和友好提示</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 添加平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|