当“本地开发”遇上“选择困难症”

各位码农老铁们，有没有遇到过这样的尴尬？想同时开发公司官网、个人博客和隔壁老王的宠物店页面，结果WampServer默认只能跑一个站点，切换项目像翻牌子一样麻烦……别慌！今天咱就用“庖丁解牛”式教学，手把手教你用WampServer配置多个虚拟主机，让你在本地一键切换项目，效率直接起飞！

（小声BB：文末还附赠“避坑指南”，专治各种配置后404的玄学问题～）

一、虚拟主机是啥？举个栗子🌰

想象你开了一家快递驿站（WampServer），默认只能收发一个店铺（比如`localhost`）的包裹。但突然有一天，你想同时代理奶茶店、火锅店和五金店的快递——这时候就需要给每个店铺分配专属货架（虚拟主机），通过不同门牌号（域名）区分包裹。

专业说人话版：

虚拟主机（VirtualHost）允许一台服务器（你的本地Wamp）通过不同域名或端口，托管多个独立网站。比如：

- `blog.test` → 你的个人博客

- `shop.test` → 电商测试站

- `localhost:8080` → 备用调试入口

二、配置实战：3步搞定多站点

Step 1：修改hosts文件——给本地域名发“身份证”

打开系统hosts文件（路径参考）：

- Windows: `C:\Windows\System32\drivers\etc\hosts`

- Mac/Linux: `/etc/hosts`

添加以下内容（用记事本管理员权限编辑）：

```plaintext

127.0.0.1 blog.test

127.0.0.1 shop.test

```

原理：告诉电脑：“访问`blog.test`和`shop.test`时，别去互联网，直接找本地127.0.0.1！”

Step 2：配置Apache——给每个站点“分房间”

打开Wamp的Apache配置文件（路径通常为）：

`wamp\bin\apache\apache2.x.x\conf\extra\httpd-vhosts.conf`

加入以下代码（示例配置）：

```apache

DocumentRoot "C:/wamp64/www/blog"

ServerName blog.test

Options Indexes FollowSymLinks

AllowOverride All

Require all granted

DocumentRoot "C:/wamp64/www/shop"

ServerName shop.test

关键参数解释：

- `DocumentRoot`：网站文件存放路径（别写成中文路径！）

- `ServerName`：绑定的域名（和hosts里一致）

- `Require all granted`：允许所有人访问（避免403错误）

Step 3：重启服务——让改动“生效”

1. 保存所有文件

2. 左键点击Wamp系统托盘图标 → 重启所有服务

此时访问`blog.test`或`shop.test`，应该能看到对应站点的内容了！如果显示空白？继续往下看“避坑指南”👇

三、避坑指南：新手常踩的5个雷区💣

1. 404 Not Found？检查路径斜杠方向！

Windows系统路径用反斜杠`\`，但Apache配置中必须用正斜杠`/`。写错会直接扑街！

2. 403 Forbidden？目录权限没放开！

确保``标签内包含`Require all granted`，否则Apache会傲娇拒绝访问。

3. hosts改了不生效？试试ipconfig /flushdns！

Windows的DNS缓存可能作妖，命令行输入这个命令强制刷新缓存。

4. 端口被占用？改个端口试试！

比如把`:80`改成`:8080`，同时记得访问时加端口号（如`blog.test:8080`）。

5. Wamp图标橙色？Apache没启动成功！

大概率是配置文件语法错误，检查是否有拼写错误或缺少引号。

四、高阶玩法：SSL证书 + 多域名HTTPS

如果想搞点高级的（比如测试微信小程序本地调试），可以给虚拟主机加HTTPS：

1. 用OpenSSL生成自签名证书（教程可搜“WampServer SSL配置”）

2. 在httpd-vhosts.conf里新增监听443端口的VirtualHost配置

3. Chrome可能会警告证书不安全——这时点“高级”→“继续访问”即可

：从此告别“单机孤独开发”

现在你的WampServer已经成功晋级为“多站点管理大师”！再也不用频繁修改代码目录或切换环境了。最后送大家一句话：

> “好的开发环境就像乐高积木——灵活组合，才能搭出无限可能。”

（如果还有问题，欢迎评论区留言～老规矩，看到必回！）

TAG:wampserver多个虚拟主机,用虚拟服务器构建多个网站,多个虚拟机网络设置,wamp设置虚拟主机