使用live server创建http服务

安装 Live Server 步骤

第 1 步：打开 VS Code

启动 Visual Studio Code。

第 2 步：打开扩展商店

• 方法一：点击左侧边栏的 扩展图标（或按快捷键 Ctrl+Shift+X / Cmd+Shift+X on Mac）
• 方法二：顶部菜单 → View（查看）  → Extensions（扩展）

第 3 步：搜索 "Live Server"

在扩展商店的搜索框中输入：

text

编辑

1Live Server

👉 认准作者是 Ritwick Dey（这是最流行、下载量超 4000 万的版本）

第 4 步：点击【Install】安装

• 找到 Live Server 插件
• 点击绿色的 Install 按钮
• 等待几秒钟，安装完成

✅ 安装成功后，按钮会变成 Uninstall，并且右下角可能有提示。

---

▶️ 使用 Live Server 启动本地 HTTP 服务器

1. 打开你的项目文件夹

   • 顶部菜单：File（文件）  → Open Folder（打开文件夹）
   • 选择包含你 HTML 文件的文件夹（例如 my-project/）

2. 右键点击你的 HTML 文件

   • 在资源管理器中，右键点击如 index.html

   • 在上下文菜单中选择：

     text

     编辑

     1Open with Live Server
     

3. 自动打开浏览器

   • VS Code 会自动用默认浏览器打开页面
   • URL 类似：http://127.0.0.1:5500/index.html
   • 地址栏显示的是 http://，不是 file:// ✅

4. 实时刷新（可选）

   • 修改 HTML/CSS/JS 文件并保存（Ctrl+S）
   • 浏览器会自动刷新（Live Reload 功能）

---

⚙️ 常见设置（可选）

你可以自定义端口、根目录等：

1. 按 Ctrl+,（或 Cmd+,）打开 VS Code 设置

2. 搜索 live server

3. 常用设置：

   • Port: 默认 5500，可改为 8080 等
   • Root Path: 默认是当前文件所在目录，可设为 /dist 等
   • Custom Browser: 指定用 Chrome、Edge 等打开

或者在项目根目录创建 .vscode/settings.json：

json

编辑

1{
2  "liveServer.settings.port": 8080,
3  "liveServer.settings.root": "/",
4  "liveServer.settings.CustomBrowser": "chrome"
5}

---

🛑 停止 Live Server

• 点击 VS Code 右下角的 Port (5500)  蓝色状态栏
• 选择 Stop Live Server
• 或直接关闭浏览器和 VS Code

---

❓ 验证是否成功

打开浏览器开发者工具（F12），在 Console 中运行：

js

编辑

1console.log(location.protocol); // 应输出 "http:"
2history.pushState({ test: 1 }, '', '/test');
3console.log('pushState 成功！无报错即正常');

✅ 如果没有 SecurityError，说明一切正常！

---

💡 小贴士

• Live Server 只用于开发，不能用于生产部署。
• 它支持 HTTP/1.1，但不支持 HTTPS（如需 HTTPS，可用 ngrok 或其他工具）。
• 如果端口被占用，它会自动换端口（如 5501、5502...）。