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


Posted in Javascript onSeptember 16, 2019

需求

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

安装xampp

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

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

开启xampp

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

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

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

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

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

配置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将angular项目运行在web服务器的教程

在xampp下启动web服务

将项目中的dist文件拷贝/剪切到xampp安装目录下的htdocs文件夹下,如下:

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

至此,就算开启了项目的web服务器,我们可以去浏览器中进行验证

http://127.0.0.1:80/dist/

在如上url下,可以看到如下的内容:

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

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

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

从别人电脑下进入网站

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

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

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

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

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

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

Javascript 相关文章推荐
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 #Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 #Javascript
js实现无限瀑布流实例方法
Sep 16 #Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 #Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
Vue实现滑动拼图验证码功能
Sep 15 #Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 #Javascript
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery 选择器详解
2015/01/19 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
理解javascript async的用法
2017/08/22 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
使用python实现简单五子棋游戏
2019/06/18 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
钳工实习自我鉴定
2013/09/19 职场文书
司机职责范本
2014/03/08 职场文书
募捐感谢信
2015/01/22 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫