跳到主要内容

第三节 开发环境搭建

在 Web 开发流程中，我们的最终目标是将完成的项目部署到互联网服务器上，供全球用户访问。

然而，在开发阶段，我们通常不会直接在远程服务器上修改代码。为了更好地模拟线上运行环境，确保项目能无缝迁移，我们需要在自己的电脑上搭建一个本地开发环境（Local Development Environment）。 简单来说，就是把你的个人电脑暂时变成一台小型的 Web 服务器。通过本地环境开发，我们可以实现“所见即所得”的高效调试，并最大限度地减少未来项目上线时可能遇到的兼容性问题。

一、工具的安装与启动​

本课程采用一款便捷集成的本地环境工具——EServer（注：此处为课程指定工具示例）。它能帮我们一键配置好 Web 服务所需的各种复杂的后台组件。

（一） 下载与安装​

  1. 获取安装包：请根据你的操作系统，在课程资源包或官方网站下载对应的安装程序。
  2. 执行安装：双击下载好的安装包，启动安装向导。
  3. 选择安装路径（重要）：在选择安装位置时，请务必遵循以下原则，以避免后续出现莫名其妙的错误：
    • 禁止包含任何中文字符。
    • 禁止包含空格。
    • 建议安装在非系统盘根目录下的纯英文路径，例如 D:\EServer 或 E:\WebTool。
  4. 完成安装：按照提示完成剩余安装步骤。

（二） 启动服务​

安装完成后打开 EServer 程序。在主界面上，你通常会看到一个醒目的“一键启动”或“启动服务”按钮。点击它，当状态显示为“已启动”或绿色指示灯亮起时，恭喜你，你的本地 Web 服务器已经开始运转了。

image

图1-2 EServer主界面启动成功状态

二、搭建一个本地静态站点​

服务器启动了，现在我们需要在服务器里创建一个“虚拟空间”来存放我们的网页文件。

  1. 在 EServer 界面左侧导航栏，点击“网站”按钮，进入网站管理界面。
  2. 点击管理界面中的“添加”按钮。
  3. 在弹出的窗口中，需要输入一个自定义域名。
    • 【小贴士】为了便于区分，建议使用非常规后缀，例如 myweb.local 或原文示例的 web.cm。这个域名只在你的本地电脑有效，EServer 会自动帮你处理解析，无需购买真实域名。
  4. 输入完成后，点击“提交”。此时，一个本地站点的框架就搭建完成了。

三、创建一个首页​

站点框架搭好了，但现在访问它里面还是空的。我们需要创建一个网页文件来显示内容。

（1）打开网站根目录​

我们要知道把文件存在电脑的什么地方。在 EServer 的“网站”列表界面，找到刚才创建的站点（如 web.cm），点击其后方的“管理”按钮，然后选择“打开根目录”。系统会自动打开该站点在硬盘上对应的文件夹。

（2） 创建首页文件 (index.html)​

  1. 在该文件夹内，点击右键，新建一个文本文档。
  2. 关键步骤：将该文件的全名（包括后缀名 .txt）重命名为 index.html。系统可能会提示更改扩展名会导致文件不可用，点击“是”确定更改。 【知识点：为什么是 index.html？】 在 Web 服务器的世界里，index.html 是约定俗成的“默认首页文件名”。当用户在浏览器只输入域名（如 http://web.cm），而不指定具体要看哪个文件时，服务器会自动寻找并展示这个名为 index 的文件。

（3）编写基础代码​

  1. 右键点击刚才创建的 index.html 文件，选择“Open with Code”（使用 VS Code 打开）。
  2. 在 VS Code 编辑器中，输入以下最基础的 HTML 代码结构，并按下 Ctrl + S 保存文件。
<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    欢迎开启WEB前端开发之旅！
  </body>
</html>

（4）访问预览页​

现在，见证奇迹的时刻到了。打开你常用的浏览器（如 Chrome、Edge），在顶部的地址栏中输入你设置的自定义域名（例如 http://web.cm），然后按回车键。如果你看到了刚才编写的文字，说明你的本地开发环境已经完美运行！

图1-3 效果预览

四、配置局域网共享访问​

独乐乐不如众乐乐。默认情况下，你的本地站点只有你自己能访问。如果你希望处于同一局域网下（例如机房或校园网）的同学或老师查看你的作品，需要进行简单的配置。

（1）查看局域网ip​

打开命令提示符： 按下 Windows键 + R，输入 cmd 并回车。在打开的黑底白字窗口中，输入 ipconfig 命令。

image

图1-4 ipconfig命令

按回车以后，即可在“IPv4 地址”一栏看到你电脑当前所在的局域网 IP 地址。

image

图1-5 ip地址

（2）配置局域网ip访问站点​

打开本地环境软件，点击左侧目录的“网站”按钮，找到自定义的站点，点击“管理 -> 修改”。

image

图1-6 打开修改按钮

在弹出的界面中的“第二域名”位置，输入刚才查到的局域网 IP 地址，点击保存。

image

图1-7 第二域名

（3）局域网的其他设备访问站点​

现在，让处在同一局域网下的其他小伙伴拿出他们的手机或电脑，打开浏览器，在地址栏输入你刚才绑定的那个 IP 地址并访问。神奇的是，他们也能在自己的设备上看到你电脑里的网页作品了！

视频教程

教学视频本地环境安装