如何使用xampp將angular項目運行在web服務器

這篇文章主要介紹如何使用xampp將angular項目運行在web服務器，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

禮縣網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)建站。

需求

在開發(fā)angular項目時，因為需要做自適配以適應不同的屏幕，而我的電腦只有1366的。所以我現(xiàn)在需要在本地將angular項目運行在xampp上，然后用手機開熱點，給本機和另一臺大屏電腦或手機連同一wifi，再使用大屏電腦或手機打開本地電腦運行的網(wǎng)站查看適配情況。

安裝xampp

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

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

開啟xampp

如果你是安裝好之后進行開啟，那么直接在底部欄的任務中找到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}],

在項目下進行ng build生成包(使用git bash here)

ng build

完成后可以看到項目下多出來一個dist文件，如下：

在xampp下啟動web服務

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

至此，就算開啟了項目的web服務器，我們可以去瀏覽器中進行驗證

http://127.0.0.1:80/dist/

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

點擊ng-china，這個就是我的項目，點擊進去就可以看到自己寫的網(wǎng)站了，圖片如下：

從別人電腦下進入網(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，在手機端進行查看頁面適配。

以上是“如何使用xampp將angular項目運行在web服務器”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前文章：如何使用xampp將angular項目運行在web服務器
本文來源：http://muchs.cn/article22/ghiccc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站策劃、定制開發(fā)、企業(yè)網(wǎng)站制作、建站公司、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)