使用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 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 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 autoload机制的详解
2013/06/09 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php获取错误信息的方法
2015/07/17 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
JS 自动安装exe程序
2008/11/30 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python连接数据库的方法
2017/10/19 Python
Python反射用法实例简析
2017/12/22 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Django如何自定义分页
2018/09/25 Python
python实现反转部分单向链表
2018/09/27 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python查看数据类型的方法
2019/10/12 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
我们的节日端午节活动方案
2014/03/02 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
Python几种酷炫的进度条的方式
2022/04/11 Python