224 lines
7.1 KiB
HTML
224 lines
7.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>H5 部署测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.test-card {
|
|
background: white;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.test-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #1B7C5E;
|
|
margin-bottom: 10px;
|
|
}
|
|
.test-result {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
button {
|
|
background-color: #1B7C5E;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
button:hover {
|
|
background-color: #156650;
|
|
}
|
|
pre {
|
|
background-color: #f4f4f4;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>武术评分系统 H5 部署测试</h1>
|
|
|
|
<div class="test-card">
|
|
<div class="test-title">1. 当前页面信息</div>
|
|
<div id="pageInfo"></div>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<div class="test-title">2. 静态资源测试</div>
|
|
<button onclick="testResources()">测试资源加载</button>
|
|
<div id="resourceTest"></div>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<div class="test-title">3. 路径配置检查</div>
|
|
<div id="pathCheck"></div>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<div class="test-title">4. 解决方案</div>
|
|
<div id="solutions"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 显示页面信息
|
|
function showPageInfo() {
|
|
const info = {
|
|
'URL': window.location.href,
|
|
'协议': window.location.protocol,
|
|
'主机': window.location.host,
|
|
'路径': window.location.pathname,
|
|
'基础路径': document.baseURI
|
|
};
|
|
|
|
let html = '<div class="test-result info">';
|
|
for (let key in info) {
|
|
html += `<strong>${key}:</strong> ${info[key]}<br>`;
|
|
}
|
|
html += '</div>';
|
|
|
|
document.getElementById('pageInfo').innerHTML = html;
|
|
}
|
|
|
|
// 测试资源加载
|
|
async function testResources() {
|
|
const resultDiv = document.getElementById('resourceTest');
|
|
resultDiv.innerHTML = '<div class="test-result info">正在测试...</div>';
|
|
|
|
const resources = [
|
|
'./static/index.css',
|
|
'./static/js/chunk-vendors.js',
|
|
'./static/js/index.js'
|
|
];
|
|
|
|
let html = '';
|
|
let allSuccess = true;
|
|
|
|
for (let resource of resources) {
|
|
try {
|
|
const response = await fetch(resource, { method: 'HEAD' });
|
|
const contentType = response.headers.get('Content-Type');
|
|
|
|
if (response.ok) {
|
|
html += `<div class="test-result success">
|
|
✓ ${resource}<br>
|
|
状态: ${response.status}<br>
|
|
类型: ${contentType}
|
|
</div>`;
|
|
} else {
|
|
html += `<div class="test-result error">
|
|
✗ ${resource}<br>
|
|
状态: ${response.status} ${response.statusText}
|
|
</div>`;
|
|
allSuccess = false;
|
|
}
|
|
} catch (error) {
|
|
html += `<div class="test-result error">
|
|
✗ ${resource}<br>
|
|
错误: ${error.message}
|
|
</div>`;
|
|
allSuccess = false;
|
|
}
|
|
}
|
|
|
|
if (allSuccess) {
|
|
html += '<div class="test-result success"><strong>所有资源加载正常！</strong></div>';
|
|
} else {
|
|
html += '<div class="test-result error"><strong>部分资源加载失败，请检查文件路径和服务器配置</strong></div>';
|
|
}
|
|
|
|
resultDiv.innerHTML = html;
|
|
}
|
|
|
|
// 检查路径配置
|
|
function checkPaths() {
|
|
const currentPath = window.location.pathname;
|
|
const isSubDir = currentPath.includes('/') && currentPath !== '/';
|
|
|
|
let html = '<div class="test-result info">';
|
|
html += `<strong>当前路径:</strong> ${currentPath}<br>`;
|
|
html += `<strong>是否在子目录:</strong> ${isSubDir ? '是' : '否'}<br>`;
|
|
|
|
if (isSubDir) {
|
|
html += '<br><strong>⚠️ 检测到部署在子目录</strong><br>';
|
|
html += '需要修改 vue.config.js 中的 publicPath 配置';
|
|
} else {
|
|
html += '<br><strong>✓ 部署在根目录</strong>';
|
|
}
|
|
html += '</div>';
|
|
|
|
document.getElementById('pathCheck').innerHTML = html;
|
|
}
|
|
|
|
// 显示解决方案
|
|
function showSolutions() {
|
|
const html = `
|
|
<div class="test-result info">
|
|
<strong>常见问题解决方案：</strong><br><br>
|
|
|
|
<strong>1. 样式完全丢失</strong><br>
|
|
• 检查 static/index.css 文件是否存在<br>
|
|
• 检查服务器 MIME 类型配置<br>
|
|
• 打开浏览器控制台查看 Network 标签<br><br>
|
|
|
|
<strong>2. 部署在子目录</strong><br>
|
|
• 修改 vue.config.js 的 publicPath<br>
|
|
• 重新编译: npm run build:h5<br><br>
|
|
|
|
<strong>3. Nginx 配置</strong><br>
|
|
<pre>location /static/ {
|
|
expires 30d;
|
|
}
|
|
location ~* \\.css$ {
|
|
add_header Content-Type text/css;
|
|
}</pre><br>
|
|
|
|
<strong>4. 本地测试</strong><br>
|
|
• cd dist/build/h5<br>
|
|
• python -m http.server 8000<br>
|
|
• 访问 http://localhost:8000<br>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('solutions').innerHTML = html;
|
|
}
|
|
|
|
// 页面加载时执行
|
|
window.onload = function() {
|
|
showPageInfo();
|
|
checkPaths();
|
|
showSolutions();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|