一般情況下我們使用 Xampp 是將網站放置於 xampp/htdoc 目錄下，因此如果我們有多個網站，例如web1、web2、web3，我們要進入以上網站時就會像是localhost/web1、localhost/web2……，以資料夾的方式管理，當我們要使用網域時就會不太方便，理想上我們會希望不同網域直接指向到特定的資料夾網頁。
因此上網查了一下解決辦法，在此紀錄一下。
Step1. 在hosts檔案設定域名解析
hosts檔案會放置於 C:\Windows\System32\drivers\etc 中，本身沒有附檔名，我們使用任何文字編輯器來打開它，比較注意的一點是需要以管理員權限打開編輯器，否則無法編輯。
打開文件後在最後面新增要解析的域名:
127.0.0.1 web1.junyou.tw
127.0.0.1 web2.junyou.tw格式則為前 ip 後 域名 兩這之間以一個空格隔開。
Step2.在Apache中設定虛擬站點
我們進入 C:\xampp\apache\conf\extra 後找到 httpd-vhosts.conf 這個檔案，一樣以編輯器打開(管理員權限)，最下面會看到一段被註解起來的指令如下，我們先將註解取消。
##<VirtualHost *:80>
##ServerAdmin webmaster@dummy-host.example.com
##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
##ServerName dummy-host.example.com
##ServerAlias www.dummy-host.example.com
##ErrorLog "logs/dummy-host.example.com-error.log"
##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>這裡我配置兩個網站，結果應該會如下。
<VirtualHost *:80>
ServerAdmin webmaster@web1.junyou.tw
DocumentRoot "C:/xampp/htdocs/web1"
ServerName web1.junyou.tw
ErrorLog "logs/web1-error.log"
CustomLog "logs/web1-access.log" common
</VirtualHost>
<VirtualHost *:80>
ServerAdmin webmaster@web2.junyou.tw
DocumentRoot "C:/xampp/htdocs/web2"
ServerName web2.junyou.tw
ErrorLog "logs/web2-error.log"
CustomLog "logs/web2-access.log" common
</VirtualHost>比較要注意的一點是DocumentRoot指的是將來你各個網站的根目錄位置。
Step3.建置網站資料夾
依照剛剛設定的 DocumentRoot 我們建立兩個資料夾與檔案”C:/xampp/htdocs/web1/index.html”、
“C:/xampp/htdocs/web2/index.html”
Step4.設定DNS
這裡我使用 cloudflare 將我的子網域分別指向同一個ip(xampp本機的public ip)
Step5. 測試
分別進入剛剛設定的兩個網址，成功指向到不同網站資料夾了，成功!
