使用xampp将angular项目运行在web服务器

需求

在开发angular项目时,因为需要做自适配以适应不同的屏幕,而我的电脑只有1366的。所以我现在需要在本地将angular项目运行在xampp上,然后用手机开热点,给本机和另一台大屏电脑或手机连同一wifi,再使用大屏电脑或手机打开本地电脑运行的网站查看适配情况。

安装xampp

下载地址:https://sourceforge.net/projects/xampp/

下载好之后,一路勾选下去就ok了,出现问题请自行百度解决。

开启xampp

如果你是安装好之后进行开启,那么直接在底部栏的任务中找到xampp,点击就能看到如下页面:

因为我们现在不需要用MySQL等东西,所以我们只需要开启Apache即可,如上。

或者如果你是原来就安装好了,现在想打开,那么请在你的xampp安装目录里面找到 “xampp-control.exe”,双击启动,然后如上述内容开启即可。安装目录中的开启文件如下:

配置Angular项目

将index.html中的base href改为如下内容

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

<!-- ng build时使用下面这个 -->
<base href="./">

给app.moudle.ts文件中添加如下内容

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下,可以看到如下的内容:

点击ng-china,这个就是我的项目,点击进去就可以看到自己写的网站了,图片如下:

从别人电脑下进入网站

使用手机给两台电脑一起开热点,或者链接同一个wifi,这样两个电脑就在同一个局域网下面了。

查看运行网站电脑的ip,注意,因为连的是wifi,此时查看的必须是WLAN的ipv4地址,使用ipconfig查看图片如下:

此时,在别人电脑上输入ip+端口+路径即可查看网站。

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

同理,也可以手机和电脑连同一个wifi,在手机端进行查看页面适配。

原文地址:https://www.cnblogs.com/yifchan/p/html-1-15.html

时间: 2024-10-10 20:38:40

使用xampp将angular项目运行在web服务器的相关文章

Visual Studio中用于ASP.NET Web项目的Web服务器

当您在 Visual Studio 中开发 Web 项目时,需要 Web 服务器才能测试或运行它们. 利用 Visual Studio,您可以使用不同的 Web 服务器进行测试,包括 IIS Express.Internet Information Services (IIS).外部主机或自定义 Web 服务器. 您可以将其中任何一种 Web 服务器用于基于文件的 Web 应用程序项目. 对于基于文件的网站项目,您可以使用 IIS Express. 本主题介绍每种 Web 服务器以及如何选择要用

Visual Studio 中用于 ASP.NET Web 项目的 Web 服务器

Visual Studio 中用于 ASP.NET Web 项目的 Web 服务器 当您在 Visual Studio 中开发 Web 项目时,需要 Web 服务器才能测试或运行它们.             利用 Visual Studio,您可以使用不同的 Web 服务器进行测试,包括 IIS Express.Internet Information Services (IIS).外部主机或自定义 Web 服务器.  您可以将其中任何一种 Web 服务器用于基于文件的 Web 应用程序项目.

Servlet和web服务器关系

前面的博客我详细的罗列了下Servlet的常用的类和接口,然后在前面的前面我类似tomcat模拟了一套web服务器,这里来做一个统一的整理,这样子可以更好的把握Servlet,也可以更好的了解下web服务器原理. 第一点: Servlet是一套规范,也就是说其中的一部分的类抽象成了接口,实际过程中Servlet运行在web服务器中,具体的实现要有web服务器来实现,这个和JDBC的驱动一个道理. 在Servlet中,Servlet是一个接口,在Servlet中的init方法用来初始化这个Serv

web服务器、应用服务器、web容器、反向代理服务器区别与联系

我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web服务器/Web容器/Web应用程序服务器/反向代理有点像四胞胎,在网络上经常一起出现.本文将带读者对这四个相似概念如何区分. 1. 一文看懂web服务器.应用服务器.web容器.反向代理服务器区别与联系 1.1. Web服务器概念与基本原理 1.1.1. Web服务器的历史 1.1.2. Web服务器工作原理 1.2. Web应用程序容器概念与基本原理 1.2.1. Web应用程序容器的由来 1.2.2. Web应用程序容器

理解Servlet和Servlet容器、Web服务器等概念

转载自http://blog.csdn.net/iAm333 之前在开源中国看到一篇文章<初学 Java Web 开发,请远离各种框架,从 Servlet 开发>,觉得很不错.想到自己之前一直对各种框架执迷不悟,顿感惭愧.于是,看了孙鑫的<Servlet/JSP深入详解:基于Tomcat的Web开发>.林信良的<JSP&Servlet学习笔记(第二版)>以及网上其他一些相关的资料,将自己的理解整理如下. Web技术 随着互联网技术的发展,基于HTTP和HTML的

认识JavaWeb,servlet, JSP, Tomcat, http协议,Web服务器

JavaWeb通常指服务器端的Java应用开发. 一般来说,服务器是在网络通信条件下工作的,这就离不开http协议. HTTP协议,是为服务器和客户端通信提供的规范,其中规定了信息的格式,符合规范格式的信息就能由服务器识别,并反馈信息.请求(request)指客户端向服务噐发送的信息:响应(response)指服务器向客户端反馈的信息. Tomcat,一款Servlet容器,可以运行在Web服务器上,可以运行Java Servlet,但它并未实现J2EE规范. JSP,Jav服务页面,是为减轻编

web服务器/cgi/html/css/js

随着Internet技术的兴起,在嵌入式设备的管理与交互中,基于Web方式的应用成为目前的主流,这种程序结构也就是大家非常熟悉的B/S架构,即在嵌入式设备上运行一个支持脚本或CGI功能的Web服务器,能够生成动态页面,在用户端只需要通过Web浏览器就可以对嵌入式设备进行管理和监控,非常方便实用.本节主要介绍这种应用的开发和移植工作. Web 典型的嵌入式Web服务器有Boa (www.boa.org)和thttpd (http://www.acme.com/software/thttpd/)等,

关于嵌入式web服务器

1.boa的配置文件boa.conf Port 80 //服务访问端口 User 0 Group 0 ErrorLog /var/log/boa/error_log //错误日志地址 AccessLog /var/log/boa/access_log //访问日志文件 DocumentRoot /var/www //HTML文档的主目录 UserDir public_html // DirectoryIndex index.html //默认访问文件 DirectoryMaker /usr/li

Jetty和Tomcat运行Maven Web项目几种方法

目录 1.简介 2.采用Jetty和Tomcat运行Maven Web项目 1.简介 上一篇我们介绍了用Eclipse创建了Maven Web项目,接下来我们介绍怎么运行Maven Web项目方便我们开发和调试,这里使用的是Maven插件的形式引用进来的,这样耦合性比较低,我们需要什么样的工具就引入对应的插件就可以用.  2.采用Jetty和Tomcat运行Maven Web项目      1)采用Jetty运行Maven Web项目 第一步:安装Jetty插件到Eclipse上,首先Eclip