需求

在开发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,在手机端进行查看页面适配。

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

  1. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  2. [转] 三步将你的 React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  3. xampp搭建开源项目iwebshop后,服务器重启后再启动xampp显示组件都启动ok,但是实际启动失败解决办法

    最近用xampp搭建了开源商城项目iwebshop,刚搭建完没问题,可是周一来因为服务器重启了,我再启动xampp,显示组件都启动ok了,但是用linux命令查看相关组件的进程时,发现实际没启动起来, ...

  4. 专家解读:利用Angular项目与数据库融合实例

    摘要:面对如何在现有的低版本的框架服务上,运行新版本的前端服务问题,华为云前端推出了一种融合方案,该方案能让独立的Angular项目整体运行在低版本的框架服务上,通过各种适配手段,让Angular项目 ...

  5. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  6. 无法在web服务器上启动调试。调试失败,因为没有启用集成windows身份验证

    ----注意:以管理员身份运行VS C#中ASP.NET Web应用程序编译时的错误:无法在web服务器上启动调试.调试失败,因为没有启用集成windows身份验证. 解决:打开IIS,在IIS里查看 ...

  7. 使用简单的 5 个步骤设置 Web 服务器集群

    通过在多个处理器之间分担工作负载并采用多种软件恢复技术,能够提供高度可用的环境并提高环境的总体 RAS(可靠性.可用性和可服务性).可以得到的好处包括:更快地从意外中断中恢复运行,以及将意外中断对终端 ...

  8. 一文看懂web服务器、应用服务器、web容器、反向代理服务器区别与联系

    我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web服务器/Web容器/Web应用程序服务器/反向代理有点像四胞胎,在网络上经常一起出现.本文将带读者对这四个相似概念如何区分. 1 ...

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

    作者: 帅虫哥 出处:www.cnblogs.com/vipyoumay/p/7455431.html(点击尾部阅读原文前往) 我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web ...

随机推荐

  1. Spring项目集成ShiroFilter简单实现权限管理

    Shiros是我们开发中常用的用来实现权限控制的一种工具包,它主要有认证.授权.加密.会话管理.与Web集成.缓存等功能.我是从事javaweb工作的,我就经常遇到需要实现权限控制的项目,之前我们都是 ...

  2. 关于Java虚拟机运行时数据区域的总结

    Java虚拟机运行时数据区域 程序计数器(Program Counter) 程序计数器作为一个概念模型,这个是用来指示下一条需要执行的字节码指令在哪. Java的多线程实际上是通过线程轮转做到的,如果 ...

  3. 大白话5分钟带你走进人工智能-第32节集成学习之最通俗理解XGBoost原理和过程

    目录 1.回顾: 1.1 有监督学习中的相关概念 1.2  回归树概念 1.3 树的优点 2.怎么训练模型: 2.1 案例引入 2.2 XGBoost目标函数求解 3.XGBoost中正则项的显式表达 ...

  4. [GO语言的并发之道] Goroutine调度原理&Channel详解

    并发(并行),一直以来都是一个编程语言里的核心主题之一,也是被开发者关注最多的话题:Go语言作为一个出道以来就自带 『高并发』光环的富二代编程语言,它的并发(并行)编程肯定是值得开发者去探究的,而Go ...

  5. 7.26 面向对象_封装_property_接口

    封装 封装 就是隐藏内部实现细节, 将复杂的,丑陋的,隐私的细节隐藏到内部,对外提供简单的访问接口 为什么要封装 1.保证关键数据的安全性 2.对外部隐藏实现细节,隔离复杂度 什么时候应该封装 1.当 ...

  6. ZooKeeper系列(三)—— Zookeeper 常用 Shell 命令

    一.节点增删改查 1.1 启动服务和连接服务 # 启动服务 bin/zkServer.sh start #连接服务 不指定服务地址则默认连接到localhost:2181 zkCli.sh -serv ...

  7. vulnhub-XXE靶机渗透

    下载链接:https://download.vulnhub.com/xxe/XXE.zip   0x01 确定目标IP 目标网络模式默认为net模式,无需修改 使用arp-scan或者netdisco ...

  8. js页面reload问题

    form表单提交时,action="url" method="get/post" 当ajax提交表单时,原本的ajax post提交  success后  不能 ...

  9. $('div','li') 和 $('div , li') 和 $('div li') 区别

    $('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div , li')才是找所有的div和li,之间不存在父子关系 $('div li') 是找div里面所有 ...

  10. Java 操作Word书签(二):添加文本、图片、表格到书签内容

    在Java操作Word书签(一)中介绍了给Word中的特定段落或文字添加书签.读取及删除已有书签的方法,本文将继续介绍Java 操作Word书签的方法,即如何给已有的书签添加内容,包括添加文本.图片. ...