WampServer环境下网页地址怎么设置？

在 WampServer 中，你的网站文件通常存放在一个特定的目录下，通过一个特殊的本地地址来访问，这个地址以 http://localhost/ 或 http://127.0.0.1/ 开头。

核心概念：本地服务器地址

当你安装并启动 WampServer 后，你的电脑就变成了一台临时的本地 Web 服务器，这个服务器的地址是固定的：

• http://localhost：这是最常用的本地地址。localhost 是一个特殊的关键词，永远指向你自己的电脑。
• http://127.0.0.1：这是 localhost 的 IP 地址版本，效果完全一样。

当你访问这两个地址时,WampServer 会自动去查找它默认的网站根目录。

如何找到并访问你的网页？

这个过程分为两步：放置文件 和 通过浏览器访问。

步骤 1：放置你的网页文件

WampServer 默认的网站根目录是：wamp64\www (如果你的 WampServer 安装在 C 盘)。

• 默认路径：C:\wamp64\www

你需要将你的所有网页文件（index.html, style.css, script.js 等）复制或移动到这个 www 文件夹中。

示例： 假设你有一个简单的项目，文件结构如下：

my_project/
├── index.html
├── css/
│   └── style.css
└── images/
    └── logo.png

你需要将 my_project 这个整个文件夹复制到 C:\wamp64\www 目录下，复制后，www 文件夹里就多了一个 my_project 文件夹。

步骤 2：通过浏览器访问

你可以打开浏览器（如 Chrome, Firefox, Edge 等），在地址栏输入以下地址来访问你的网页：

访问 www 目录下的第一个网页

如果你的项目是直接放在 www 根目录下，而不是子文件夹里，直接访问根地址即可。

• 地址：http://localhost/
• 作用：浏览器会自动寻找 www 目录下的 index.html 或 index.php 文件并显示它。

访问 www 目录下的子文件夹（最常见的情况）

这对应我们上面将 my_project 文件夹放入 www 的例子。

• 地址：http://localhost/my_project/
• 作用：浏览器会访问 C:\wamp64\www\my_project\ 目录，并自动寻找该目录下的 index.html 或 index.php 文件。

访问 www 目录下的特定文件

如果你想直接访问一个特定的 HTML 文件，而不是默认的首页。

• 地址：http://localhost/my_project/about.html
• 作用：浏览器会直接显示 C:\wamp64\www\my_project\about.html 这个文件的内容。

常见问题与解决方法

问题：我输入 http://localhost/ 但打不开，或者显示 WampServer 的首页。

• 原因：这通常意味着 WampServer 服务没有正常启动，或者你没有正确地将文件放在 www 目录下。
• 解决方法：
  1. 检查 WampServer 图标在电脑右下角的任务栏上。图标必须是绿色的！如果是红色（服务未启动）或橙色（端口被占用），请右键点击图标，选择 "Start All Services"。
  2. 确保你的文件确实在 C:\wamp64\www 目录下。
  3. 如果还是不行,尝试在地址栏输入 http://127.0.0.1/ 看看是否有效。

问题：我的图片和 CSS 样式为什么没有加载出来？

• 原因：这是最常见的问题，你 HTML 文件中的路径写错了，在本地服务器上，路径必须基于当前访问的 URL，而不是你电脑上的文件路径。
• 解决方法：
  • 绝对路径（推荐）：始终以 开头，表示从网站根目录 (www) 开始。
    • 错误：<img src="C:\wamp64\www\my_project\images\logo.png">
    • 正确：<img src="/my_project/images/logo.png"> 或者 <img src="images/logo.png"> (HTML 文件在 my_project 目录下)
  • 相对路径：基于 HTML 文件自身的位置。
    • 如果你的 HTML 文件在 my_project 目录下，想访问 my_project/images/logo.png，就写 images/logo.png。
    • 如果你的 HTML 文件在 my_project/subpage 目录下，想访问 my_project/images/logo.png，就需要写 ../images/logo.png ( 表示返回上一级目录)。

问题：如何为我的项目设置一个更友好的地址（如 http://myproject/）？

• 原因：为了方便管理和访问多个项目。
• 解决方法：你需要配置 WampServer 的虚拟主机。
  1. 编辑配置文件：用记事本打开 C:\wamp64\bin\apache\apache2.4.x\conf\extra\httpd-vhosts.conf (这里的 apache2.4.x 版本号可能不同)。
  2. 添加虚拟主机配置：在文件末尾添加以下内容（将 myproject 替换成你想要的名字，C:/wamp64/www/my_project 替换成你的项目实际路径）：

     <VirtualHost *:80>
         ServerName myproject
         DocumentRoot "C:/wamp64/www/my_project"
         <Directory "C:/wamp64/www/my_project">
             Options Indexes FollowSymLinks
             AllowOverride All
             Require local
         </Directory>
     </VirtualHost>

  3. 编辑 hosts 文件：用记事本以管理员身份打开 C:\Windows\System32\drivers\etc\hosts 文件，在最后添加一行：

     0.0.1       myproject

  4. 重启 Apache：右键点击 WampServer 图标，选择 "Restart All Services"。
  5. 访问：现在你就可以在浏览器中直接访问 http://myproject/ 来打开你的项目了。

记住关键点：文件放 www，地址用 localhost/文件夹名，祝你使用愉快！