VSCode怎么运行代码html项目？多页面跳转运行设置-VSCode-PHP中文网

必须用 http 服务器（如 live server）运行多页面 html 项目，因浏览器禁止 file:// 协议下的跨文件跳转、模块加载和 fetch；live server 提供真实 http 服务，支持相对路径引用、自动刷新，并可配置端口、主机和根目录。

vscode怎么运行代码html项目？多页面跳转运行设置

直接双击 HTML 文件或用浏览器打开 file:// 协议地址，多页面跳转、JS 模块加载、fetch 读取本地 JSON 都会失败——这不是你代码写错了，是浏览器安全策略拦的。真正能跑通多页面项目的唯一可靠方式，是用 http:// 协议启动本地服务器。

为什么 Live Server 是默认选择

Live Server 启动的是一个真实 HTTP 服务（默认端口 5500），所有相对路径、跨页面链接、静态资源引用、ES 模块导入、localStorage 和 fetch('./data.json') 全部正常工作。它不依赖 Node.js 环境，安装即用，且自动监听文件变化并刷新浏览器。

常见错误现象：

点击 about.html 链接后空白页，控制台报 net::ERR_FILE_PROTOCOL
import 语句报错 Failed to resolve module specifier
右键菜单里没有 Open with Live Server —— 说明当前没打开任何 .html 文件，或插件未激活

多页面项目结构必须用相对路径

Live Server 的根目录默认是 VSCode 当前打开的文件夹（即你通过 File → Open Folder 打开的路径）。所有 HTML 页面之间跳转必须用相对路径，不能写绝对路径或硬编码端口。

示例结构：

/my-site
├── index.html
├── about.html
├── contact.html
├── css/style.css
├── js/main.js
└── data/info.json

在 index.html 中写链接：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<a href="about.html">关于我们</a>
<a href="./contact.html">联系我们</a>
<link rel="stylesheet" href="css/style.css"><script type="module" src="js/main.js"></script>

注意：./contact.html 和 contact.html 效果一致；但 /contact.html（开头带斜杠）会从服务器根路径找，容易 404。

端口冲突、局域网访问和根目录配置

如果 5500 端口被占（比如另一个 Live Server 或 Python 的 http.server），插件会自动换端口并提示，但最好主动配好避免混乱。

在 VSCode 设置（Ctrl + ,）中搜索以下配置项：

liveServer.settings.port：填入固定端口号，如 3000
liveServer.settings.host：设为 0.0.0.0 才能让手机或同事电脑通过 Wi-Fi 访问（例如 http://192.168.x.x:3000/index.html）
liveServer.settings.root：若 HTML 文件不在项目根目录（比如全在 src/ 下），填 "./src"，否则会找不到 css/ 等子目录

也可以在项目根目录建 .vscode/settings.json，内容如下：

{
  "liveServer.settings.port": 3000,
  "liveServer.settings.host": "0.0.0.0",
  "liveServer.settings.root": "./src"
}

别踩这些坑

Live Server 不是万能的，有些场景它压根不适用：

项目用了 Vite、Webpack 或 Vue/React 单页应用——这时该用对应框架的 dev server，不是 Live Server
想调试 Chrome DevTools 的断点，但 launch.json 还指着 localhost:8080：必须把 url 改成 http://127.0.0.1:3000/index.html（端口要和 Live Server 一致）
路径含中文或空格：新版 Live Server 已支持，但旧版或某些系统命令行仍可能出问题，建议项目路径全用英文+下划线
误以为“Go Live”按钮能全局启动：它只对当前编辑器里已打开的 HTML 文件生效，没打开文件时按钮是灰的