fix bugs
This commit is contained in:
223
test-h5.html
Normal file
223
test-h5.html
Normal file
@@ -0,0 +1,223 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user