使用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 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
第五章 php数组操作
2011/12/30 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JS中的三个循环小结
2017/06/20 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
python实现简单文件读写函数
2021/02/25 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
总经理岗位职责
2013/11/09 职场文书
消防标语大全
2014/06/07 职场文书
实验心得体会
2014/09/05 职场文书
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python