使用XAMPP配置多个网站项目（超详细版）

在写前端代码时，经常要受限于后端的进度，所以最近在想，自己学习一下简单的php用于测试前端代码。上网查了下，XAMPP是一个非常好的快速开发Apache、MySQL 、php的免费集成软件，可以很方便的进行配置和开发。

一、下载XAMPP

官网下载地址：https://www.apachefriends.org/download.html

官网提供了Window、Linux、OS X三种操作系统的安装包，Windows只有32位的安装包，不过亲测win10 64位的电脑装了之后可正常使用，点击下载以后按正常装软件的方式安装完毕即可。

下载完后，运行界面如下，端口默认是80，我这里修改成了8088，后面会讲如何修改。

二、修改默认端口

XAMPP的默认端口是80，如果端口被占用，可点击Apache服务的config修改配置端口

（1）打开Apache的config配置文件，右键config，选择第一个，该文件实际是安装目录下\xampp\apache\conf中的httpd.conf文件，按照该路径也能在文件夹中找到这个配置文件

（2）ctrl+f 查找文件中文件中所有的80，将其修改成自己想要的端口（我这里修改为8088）

端口修改完后再重新运行XAMPP，在浏览器输入localhost:8088（端口号按自己实际修改的填）即可看到网站跑起来了

三、建立多个带域名的本地站点

通常我们希望在本地能运行多个站点，这就需要建立带域名的站点来进行区分了。

（1）更改入口文件所在根目录，同样打开上述的config配置文件，搜索DocumentRoot，将后面的地址修改为项目所在目录的地址

在建立本地站点时，xampp会去这个根目录寻找一个名称为index的网页作为入口，如果不修改这个根目录，则默认地址为xampp\htdocs，在上一步打开的网页实际上就是这里的index.html文件

（2）更改虚拟主机配置，如果要在本地运行多个站点，则需要去xampp\apache\conf\extra\里的httpd-vhosts.conf增加站点配置，找到文件打开，在最后加入以下代码，其中DocumentRoot是index.html文件所在的目录，SeverName是自定义的域名，每次新增项目时都要按以下格式在最后添加这几行代码

<VirtualHost *:8088>

DocumentRoot "E:\Desktop\program_site\program-project\dist"

ServerName programsite.com 

</VirtualHost>

注意：如果端口号80被占用了，除了在XAMPP的config文件修改端口号外，在这里也要修改端口号，ctrl+f选中所有80并修改为8088

（3）更改本地host，打开C:\Windows\System32\drivers\etc文件中的hosts文件，在最后添加以下内容

host设置格式为:IP  域名

在这里，IP设为本地IP地址127.0.0.1，通过设置的域名转向本地IP从而进行本地网站的测试

（4）运行网站：host文件修改好之后，在浏览器输入域名即可运行网站，如果端口号修改了，则需要在域名后增加端口号，例如我这里修改成了8088，则输入：wheretogo.com:8088

如果是端口号为80，则直接输入域名就能运行网站，因为80端口是为HTTP（HyperText Transport Protocol)即超文本传输协议开放的，浏览器浏览网页默认的端口号都是80