如何创建launch.html自动启动localhost访问本地HTML项目？

首先必须明确：仅靠纯HTML无法实现自动启动本地服务器。浏览器的安全策略严格禁止网页直接启动本地系统进程（包括服务器程序），这是为了防止恶意网页随意操控用户设备。

不过可以用以下无需额外安装Node.js等工具的方案，通过launch.html引导用户快速启动本地服务器：

方案1：利用系统预装的Python（推荐） #

多数Windows/macOS/Linux系统默认预装了Python，我们可以在launch.html里提供一键复制的命令行操作步骤，降低用户操作成本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>启动项目服务器</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
        .command-block { background: #f8f9fa; padding: 12px; border-radius: 4px; font-family: Consolas, monospace; margin: 10px 0; }
        .btn { padding: 8px 16px; margin-right: 10px; cursor: pointer; border: none; border-radius: 4px; background: #007bff; color: white; }
        .btn:hover { background: #0056b3; }
    </style>
</head>
<body>
    <h1>启动本地服务器</h1>
    <p>无需安装额外工具，按以下步骤操作即可：</p>
    <ol>
        <li>打开系统的命令提示符（Windows）或终端（Mac/Linux）</li>
        <li>复制下面的命令，粘贴到命令行并执行，切换到项目文件夹：</li>
        <div class="command-block" id="cd-command">cd "替换为你的项目文件夹绝对路径"</div>
        <li>复制下面的命令，启动本地服务器：</li>
        <div class="command-block" id="server-command">
            python -m http.server 8080<br>
            若命令失败，尝试：<br>
            python3 -m http.server 8080
        </div>
        <li>保持命令行窗口打开，在浏览器中访问 <code>localhost:8080/project.html</code> 即可打开项目</li>
    </ol>

    <button class="btn" onclick="copyCommand('cd-command')">复制路径切换命令</button>
    <button class="btn" onclick="copyCommand('server-command')">复制启动服务器命令</button>

    <script>
        function copyCommand(elementId) {
            const commandText = document.getElementById(elementId).innerText;
            navigator.clipboard.writeText(commandText)
                .then(() => alert("命令已复制到剪贴板"))
                .catch(() => alert("复制失败，请手动选中复制"));
        }
    </script>
</body>
</html>

方案2：使用浏览器本地服务器扩展 #

如果用户完全不想碰命令行，可以用浏览器扩展实现可视化启动服务器，launch.html可作为引导说明：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>启动项目服务器</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
        .step-section { margin: 20px 0; padding: 15px; border: 1px solid #eee; border-radius: 4px; }
        .code { font-family: monospace; background: #f8f9fa; padding: 2px 6px; border-radius: 3px; }
    </style>
</head>
<body>
    <h1>启动本地服务器</h1>
    <p>使用浏览器扩展快速启动，全程无需命令行：</p>
    <div class="step-section">
        <h3>步骤1：安装扩展</h3>
        <p>在Chrome浏览器中安装「Web Server for Chrome」扩展（浏览器应用商店可直接搜索下载）</p>
    </div>
    <div class="step-section">
        <h3>步骤2：配置服务器</h3>
        <ol>
            <li>打开扩展，点击「CHOOSE FOLDER」选择你的项目文件夹</li>
            <li>在扩展设置中把端口改为8080</li>
            <li>若需要默认打开项目页面，可设置「Default file」为 <code>project.html</code></li>
        </ol>
    </div>
    <div class="step-section">
        <h3>步骤3：访问项目</h3>
        <p>点击扩展的「Start」按钮，然后在浏览器地址栏输入 <code>localhost:8080</code> 即可打开项目</p>
    </div>
</body>
</html>

补充说明 #

• 两种方案都不需要用户额外安装Node.js或其他开发工具，利用系统或浏览器自带能力即可实现。
• 无论哪种方案，服务器启动后必须保持对应的窗口（命令行或扩展）处于打开状态，关闭后服务器会停止运行。

内容的提问来源于stack exchange，提问作者PHCM