本地H5游戏开发环境搭建指南：图文详解，小白也能轻松上手

本地H5游戏开发环境搭建指南：图文详解，小白也能轻松上手

每一步都有清晰说明，跟着操作，10分钟搞定本地游戏开发环境

很多想尝试H5游戏开发的朋友，被"搭建环境"这四个字吓退了。其实，你只需要一个浏览器和一个编辑器就够了。今天这篇教程全程详细说明，哪怕你从没写过代码，也能跟着完成搭建。

---

📋 准备工作：你需要什么？

工具	用途	获取方式
Chrome浏览器	运行和调试游戏	已安装/去官网下载
VS Code编辑器	编写代码	https://code.visualstudio.com/ 免费下载
Live Server插件	一键启动本地服务器	VS Code内安装

⚠️ 特别提醒：不要用IE或老版本Safari，推荐使用Chrome 90+版本。

---

第一步：安装VS Code（已有可跳过）

1.1 下载VS Code

打开浏览器，访问VS Code官网：https://code.visualstudio.com/

点击蓝色的 "Download for Windows" 按钮（Mac用户会自动识别为Mac版本）

📝 根据你的操作系统，网站会自动推荐对应版本，直接点击下载即可。

1.2 安装VS Code

双击下载的安装文件，一路点击"下一步"即可，所有选项保持默认。

安装完成后，桌面上会出现VS Code的蓝色图标，双击打开即可。

---

第二步：安装Live Server插件（核心步骤）

Live Server是VS Code的一个插件，能让你一键启动本地服务器，实现"保存代码→浏览器自动刷新"的实时预览效果。

2.1 打开插件市场

在VS Code左侧边栏，点击方块图标（扩展商店）。

或者使用快捷键：

• Windows/Linux：Ctrl + Shift + X
• Mac：Cmd + Shift + X

2.2 搜索并安装

在搜索框中输入 "Live Server"，找到由 "Ritwick Dey" 开发的插件（图标是橙色的）。

点击蓝色的 "Install" 按钮，等待几秒安装完成。参考如下图：

安装成功后，VS Code右下角会出现一个 "Go Live" 按钮（后续会用到）。

---

第三步：打开你的第一个游戏项目

3.1 用VS Code打开文件夹

方法一（推荐）：

1. 打开VS Code
2. 点击左侧 "资源管理器" 图标（第一个文件图标）
3. 点击 "打开文件夹" 按钮
4. 选择你已经存在的游戏所在文件夹

方法二（快捷方式）：
直接把你的游戏文件夹拖拽到VS Code窗口中。

成功打开后，左侧会显示你的项目文件夹（目前是空的）。

---

第四步：启动Live Server，预览你的游戏

如果没有游戏可以免费获取： 点击这里下载

4.1 启动服务器

• 方法一：在VS Code右下角，点击 "Go Live" 按钮。

  注意：如果当前打开的不是HTML文件，"Go Live"按钮可能不会出现。请先在左侧点击选中你的HTML文件。

• 方法二（推荐）：在左侧文件列表中，右键点击你的主HTML文件（如 index.html），选择 "Open with Live Server"。

4.2 浏览器自动打开

点击后，Chrome浏览器会自动打开并显示你的游戏页面。

此时地址栏显示的是 http://127.0.0.1:5500/你的文件名.html，说明成功通过HTTP协议访问。

🎉 恭喜！ 你的本地H5游戏已经成功运行了！

---

---

第五步：移动端真机预览

5.1 查看电脑IP

• Windows：Win + R → 输入 cmd → 输入 ipconfig，找到 "IPv4地址"（如 192.168.1.xxx）。
• Mac：打开终端，输入 ifconfig，找到 en0 下的 inet。

5.2 手机访问

确保手机和电脑在同一个WiFi下，手机浏览器输入 http://你的电脑IP:5500 即可访问。