使用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，在手机端进行查看页面适配。

赞 (0)

相关推荐

  • AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    本文实例讲述了AngularJS实现与Java Web服务器交互操作的方法.分享给大家供大家参考,具体如下: AngularJS是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web服务器进行交互. 准备工作 1.下载angular js库. 官网下载地址:https://angularjs.org/ 或者点击此处本站下载. 2.开发环境准备,由于是和Tomcat服务器

  • 使用xampp将angular项目运行在web服务器的教程

    需求 在开发angular项目时,因为需要做自适配以适应不同的屏幕,而我的电脑只有1366的.所以我现在需要在本地将angular项目运行在xampp上,然后用手机开热点,给本机和另一台大屏电脑或手机连同一wifi,再使用大屏电脑或手机打开本地电脑运行的网站查看适配情况. 安装xampp 下载地址:https://sourceforge.net/projects/xampp/ 下载好之后,一路勾选下去就ok了,出现问题请自行百度解决. 开启xampp 如果你是安装好之后进行开启,那么直接在底部栏

  • Spring boot项目部署到云服务器小白教程详解

    本篇文章主要介绍了Spring boot项目部署到云服务器小白教程详解,分享给大家,具体如下: 测试地址:47.94.154.205:8084 一.Linux下应用Shell通过SSH连接云服务器 //ssh 用户名@公网IP ssh josiah@ip // 输入密码 二.开始搭建SpringBoot的运行环境 1．安装JDK并配置环境变量 1) 打开JDK官网 www.oracle.com 2) 找面最新对应的JDK版本,下载 这里要注意的一个问题是:云服务器下载JDK时一定要在本地去ora

  • Linux Apache Web 服务器终极教程

    APACHE系统介绍 根据著名的WWW服务器调查公司所作的调查,世界上百分之五十以上的WWW服务器都在使用Apache,是世界排名第一的WEB服务器.Apache的诞生极富有戏剧性.当NCSA WWW服务器项目停顿后,那些使用NCSA WWW服务器的人们开始交换他们用于该服务器的补丁程序,他们也很快认识到成立管理这些补丁程序的论坛是必要的.就这样,诞生了Apache Group,后来这个团体在NCSA的基础上创建了Apache. Apache的主要特征是: . 可以运行上所有计算机平台: . 支

  • windows系统搭建WEB服务器详细教程

    windows系统搭建WEB服务器详细教程

    本文实例为大家分享了windows系统搭建WEB服务器的具体代码,供大家参考,具体内容如下 1.WEB服务器也称为网页服务器或HTTP服务器 2.WEB服务器使用的协议是HTTP或HIIPS 3.协议及端口号 HTTP协议端口号:TCP 80 HTTPS协议端口号:TCP 443 4.web服务器发布软件 微软:IIS(可以发布web网站和FTP站点) Linux:Apache.LAMP.Tomcat.Nginx 第三方:phpstudy.XAMPP 5.部署web服务器 1)配置静态IP地址

  • 教你使用Python实现一个简易版Web服务器

    目录 一.简介 二.Web服务器基础概念 三.Python网络编程库 四.实现简易Web服务器 1.使用socket库创建服务器套接字. 2.绑定服务器IP地址和端口. 3.监听客户端连接. 4.接受客户端连接并处理请求. 五.处理HTTP请求 六.返回静态文件 1.根据请求URL读取文件内容. 2.根据文件内容构建HTTP响应. 七.测试与优化 八.总结及拓展 九.补充:多线程处理客户端请求 一.修改处理客户端请求的函数 二.使用多线程处理客户端请求 三.完整的多线程Web服务器代码 一.简介

  • 基于创建Web项目运行时出错的解决方法(必看篇)

    基于创建Web项目运行时出错的解决方法(必看篇)

    1.目录结构 2.各文件内容 index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> </head> <body> <form action="/Servlet" method="

  • Spring Boot非Web项目运行配置的方法教程

    现在有一个非web项目: 比如一个kafka的消费端, 监听某个消息topic, 并处理对应的消息通过其他api发送通知或者短信给相关人员. 这时候想使用Spring Boot运行, 但又不需要依赖web, tomcat, jdbc这些 依赖如下: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId>

  • Spring Boot非Web项目运行的方法

    有时候一些项目并不需要提供 Web 服务,例如跑定时任务的项目,如果都按照 Web 项目启动未免画蛇添足浪费资源 为了达到非 Web 运行的效果,首先调整 Maven 依赖,不再依赖 spring-boot-starter-web,转而依赖最基础的 spring-boot-starter: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactI

  • linux（center OS7）安装JDK、tomcat、mysql 搭建java web项目运行环境

    一.安装JDK 1.卸载旧版本或者系统自带的JDK (1)列出所有已安装的JDK rpm -qa | grep jdk (2)卸载不需要的JDK yum -y remove 安装包名称 2.下载并解压JDK (1)下载安装包 进入到/usr/local目录下新建java目录 mkdir java ,在Java目录下使用wget指令下载安装包,如 wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http%3A%2

  • 使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动

随机推荐