本篇文章主要介紹了Apache虛擬目錄配置及vue-cli反向代理的設定方法，具有一定的參考價值，感興趣的小夥伴們可以參考一下
配置需求來自於前後端分離。後臺由於使用PHP或者Java，但是前端使用vue,React這些框架時怎麼和後端有效的資料通訊。反向代理是個很好的選擇，雖然jsonp也可以，單並不好玩。

Apache配置虛擬目錄

-實際上線專案需要透過域名來訪問，比如但在本機上如何配置虛擬域名來訪問本機的專案呢？

1.找到C:\Windows\System32\drivers\etc\hosts這個檔案新增以下格式內容

127.0.0.1   //你的虛擬域名
2.配置Apache專案目錄

1.找到 \apache\conf\httpd.conf 這個檔案，修改內容

Virtual hostsInclude conf/extra/httpd-vhosts.conf （這行的註釋#去掉）

2.找到\apache\conf\extra\httpd-vhosts.conf這個檔案配置專案目錄

<VirtualHost *:80> ##ServerAdmin   DocumentRoot “C:/xampp/htdocs/mobileApp” ##你的後端專案目錄 ServerName   ##虛擬域名 ##ServerAlias   ##ErrorLog “logs/dummy-host.example.com-error.log” ##CustomLog “logs/dummy-host.example.com-access.log” common <Directory “C:/xampp/htdocs/mobileApp”> Options Indexes FollowSymLinks DirectoryIndex index.html index.php AllowOverride all Order allow,deny Allow from all 
3.proxyTable代理配置，以vue-cli為例

proxyTable: { ‘/api’: { target: ‘ ’, changeOrigin: true, pathRewrite: { ‘^/api’: ‘’ } } },
這樣就可以實現跨域訪問了。

示例：

$.ajax({ url: ‘/api/indexList.php’, type: ‘GET’, success: function (data) { that.list = data.data; console.log(data); } })