需求背景

項目需求需要在不同的域名下，判斷展示不同的內(nèi)容，為了模擬線上的正式域名，有以下幾種方案：

方案一：

配置host:
1、找到host的文件地址（不會的百度）
2、配置host:

127.0.0.1  www.test.abc.com

3、如果你要使用www.test.abc.com訪問，那么就需要修改項目中的端口號，改成80（默認端口）
4、如果不改端口，那么訪問url就要加端口號
比如：項目端口號：9528 訪問鏈接：www.test.abc.com:9528
5、這樣訪問是可行的，但訪問會出現(xiàn)Invalid Host header問題
解決方案：
在vue.config.js或者webpack.dev.conf.js的devServer中添加disableHostCheck:true；
或者
historyApiFallback: true,
allowedHosts: "all",
具體的解決方案根據(jù)自己的項目

方案二：

nginx配置

1、安裝nginx自行安裝（不會的百度）
2、找到nginx配置路徑（conf等文件）
nginx.conf 修改兩處

server_name: www.test.abc.com
 location / {
           proxy_pass http://127.0.0.1:9528;
        }

3、配置host: （如果是正式域名需要配置dns解析，這里只是個測試域名，所以要配置host才能生效）

127.0.0.1  www.test.abc.com

4、訪問 www.test.abc.com，出現(xiàn)Invalid Host header問題按上述方案解決

方案三：

第三方工具：whistle

1、安裝及啟動whistle

安裝

npm install -g whistle

啟動

w2 start

2、安裝證書

http://wproxy.org/whistle/webui/https.html

安裝完證書，配置好規(guī)則，需要配置代理，W2 可以看設置代理

image.png

3、打開地址：http://127.0.0.1:8899/
配置規(guī)則：

www.test.abc.com 127.0.0.1:9528/

4、訪問www.test.abc.com

以上三種方案都可以解決模擬正式域名映射到本地IP開發(fā)環(huán)境,進行測試。