使用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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
JS访问对象两种方式区别解析
Aug 29 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分页函数
2006/07/08 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python类装饰器用法实例
2015/06/04 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python模拟实现斗地主发牌
2020/01/07 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
将相和教学反思
2014/02/04 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
离婚律师函范本
2015/05/27 职场文书
元旦主持词开场白
2015/05/29 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js