您好,登錄后才能下訂單哦!
這篇文章主要介紹如何使用xampp將angular項目運行在web服務(wù)器,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
需求
在開發(fā)angular項目時,因為需要做自適配以適應(yīng)不同的屏幕,而我的電腦只有1366的。所以我現(xiàn)在需要在本地將angular項目運行在xampp上,然后用手機開熱點,給本機和另一臺大屏電腦或手機連同一wifi,再使用大屏電腦或手機打開本地電腦運行的網(wǎng)站查看適配情況。
安裝xampp
下載地址:https://sourceforge.net/projects/xampp/
下載好之后,一路勾選下去就ok了,出現(xiàn)問題請自行百度解決。
開啟xampp
如果你是安裝好之后進(jìn)行開啟,那么直接在底部欄的任務(wù)中找到xampp,點擊就能看到如下頁面:
因為我們現(xiàn)在不需要用MySQL等東西,所以我們只需要開啟Apache即可,如上。
或者如果你是原來就安裝好了,現(xiàn)在想打開,那么請在你的xampp安裝目錄里面找到 “xampp-control.exe”,雙擊啟動,然后如上述內(nèi)容開啟即可。安裝目錄中的開啟文件如下:
配置Angular項目
將index.html中的base href改為如下內(nèi)容
<!-- <base href="/"> --> <!-- ng build時使用下面這個 --> <base href="./">
給app.moudle.ts文件中添加如下內(nèi)容
import {HashLocationStrategy, LocationStrategy} from '@angular/common'; ... providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy}],
在項目下進(jìn)行ng build生成包(使用git bash here)
ng build
完成后可以看到項目下多出來一個dist文件,如下:
在xampp下啟動web服務(wù)
將項目中的dist文件拷貝/剪切到xampp安裝目錄下的htdocs文件夾下,如下:
至此,就算開啟了項目的web服務(wù)器,我們可以去瀏覽器中進(jìn)行驗證
http://127.0.0.1:80/dist/
在如上url下,可以看到如下的內(nèi)容:
點擊ng-china,這個就是我的項目,點擊進(jìn)去就可以看到自己寫的網(wǎng)站了,圖片如下:
從別人電腦下進(jìn)入網(wǎng)站
使用手機給兩臺電腦一起開熱點,或者鏈接同一個wifi,這樣兩個電腦就在同一個局域網(wǎng)下面了。
查看運行網(wǎng)站電腦的ip,注意,因為連的是wifi,此時查看的必須是WLAN的ipv4地址,使用ipconfig查看圖片如下:
此時,在別人電腦上輸入ip+端口+路徑即可查看網(wǎng)站。
http://172.56.192.157:80/dist/ng-china
同理,也可以手機和電腦連同一個wifi,在手機端進(jìn)行查看頁面適配。
以上是“如何使用xampp將angular項目運行在web服務(wù)器”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。