需求

在開(kāi)發(fā)angular項(xiàng)目時(shí)，因?yàn)樾枰鲎赃m配以適應(yīng)不同的屏幕，而我的電腦只有1366的。所以我現(xiàn)在需要在本地將angular項(xiàng)目運(yùn)行在xampp上，然后用手機(jī)開(kāi)熱點(diǎn)，給本機(jī)和另一臺(tái)大屏電腦或手機(jī)連同一wifi，再使用大屏電腦或手機(jī)打開(kāi)本地電腦運(yùn)行的網(wǎng)站查看適配情況。

安裝xampp

下載地址：https://sourceforge.net/projects/xampp/

下載好之后，一路勾選下去就ok了，出現(xiàn)問(wèn)題請(qǐng)自行百度解決。

開(kāi)啟xampp

如果你是安裝好之后進(jìn)行開(kāi)啟，那么直接在底部欄的任務(wù)中找到xampp，點(diǎn)擊就能看到如下頁(yè)面：

因?yàn)槲覀儸F(xiàn)在不需要用MySQL等東西，所以我們只需要開(kāi)啟Apache即可，如上。

或者如果你是原來(lái)就安裝好了，現(xiàn)在想打開(kāi)，那么請(qǐng)?jiān)谀愕膞ampp安裝目錄里面找到 “xampp-control.exe”，雙擊啟動(dòng)，然后如上述內(nèi)容開(kāi)啟即可。安裝目錄中的開(kāi)啟文件如下：

配置Angular項(xiàng)目

將index.html中的base href改為如下內(nèi)容

<!-- <base href="/"> -->

<!-- ng build時(shí)使用下面這個(gè) -->
<base href="./">

給app.moudle.ts文件中添加如下內(nèi)容

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

...
providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy}],

在項(xiàng)目下進(jìn)行ng build生成包(使用git bash here)

ng build

完成后可以看到項(xiàng)目下多出來(lái)一個(gè)dist文件，如下：

在xampp下啟動(dòng)web服務(wù)

將項(xiàng)目中的dist文件拷貝/剪切到xampp安裝目錄下的htdocs文件夾下，如下：

至此，就算開(kāi)啟了項(xiàng)目的web服務(wù)器，我們可以去瀏覽器中進(jìn)行驗(yàn)證

http://127.0.0.1:80/dist/

在如上url下，可以看到如下的內(nèi)容：

點(diǎn)擊ng-china，這個(gè)就是我的項(xiàng)目，點(diǎn)擊進(jìn)去就可以看到自己寫(xiě)的網(wǎng)站了，圖片如下：

從別人電腦下進(jìn)入網(wǎng)站

使用手機(jī)給兩臺(tái)電腦一起開(kāi)熱點(diǎn)，或者鏈接同一個(gè)wifi，這樣兩個(gè)電腦就在同一個(gè)局域網(wǎng)下面了。

查看運(yùn)行網(wǎng)站電腦的ip，注意，因?yàn)檫B的是wifi，此時(shí)查看的必須是WLAN的ipv4地址，使用ipconfig查看圖片如下：

此時(shí)，在別人電腦上輸入ip+端口+路徑即可查看網(wǎng)站。

http://172.56.192.157:80/dist/ng-china

同理，也可以手機(jī)和電腦連同一個(gè)wifi，在手機(jī)端進(jìn)行查看頁(yè)面適配。