在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器。
本文是利用node.js中的http-server,开启本地服务,步骤如下:

1 下载node.js

官网地址: https://nodejs.org
下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本,确认是否安装成功。

  

2 下载http-server

在终端输入:
npm install http-server -g

  

3 开启 http-server服务

终端进入目标文件夹,然后在终端输入:

http-server -c-1   (⚠️只输入http-server的话,更新了代码后,页面不会同步更新)
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.8.196:8080
Hit CTRL-C to stop the server

  

4 关闭 http-server服务

按快捷键CTRL-C
终端显示^Chttp-server stopped.即关闭服务成功。

 

4 这时候打开页面无法正常显示,终端给出提示

[Wed Aug 21 2019 07:27:19 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/7575.0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36"
[Wed Aug 21 2019 07:29:43 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36".0.3770.100 Safari/537.36"

4 解决办法

4.1:装anywhere!然后在要设置的目录下 运行anywhere!就可以解决了! anywhere可以打开静态页面

4.2:anywhere安装命令:npm install -g anywhere

4.3:使用:在要启动静态服务的目录下执行

4.4:anywhere -p 8080

PS C:\Users\ASUS\Desktop\working\demo> anywhere -p 8080
Running at http://192.168.43.134:8080/
Also running at https://192.168.43.134:8081/

4 最后一步,在端口号后面添加要打开的文件,手机端输入地址也可以访问这个页面了

  

http://192.168.43.134:8080/index.html

5 吃水不忘挖井人,借鉴了以下网站

https://www.cnblogs.com/nolaaaaa/p/9126385.html

https://blog.csdn.net/weixin_40836227/article/details/99710001

前端html页面,手机查看的更多相关文章

  1. Ajax 以及 前端JSP页面如何查看数值

    $.ajax({ url: ctx + "/unit/rsdl/qyjy/getDljgCode", type: "post", success: functi ...

  2. 刚写完的商城erp + 这个商城前台,新鲜出炉。自己1个人写, 包括php框架和前端html页面.

    刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面.

  3. 117 FP页面无法查看

    用户表示117 FP页面无法查看,提示如下错误: 跟进: 1.进入FP服务器可看到以下错误 这个错误的框就表示FP的一个进程报错,自动断掉了,需要重新跑一次EXIT,INIT,PLAN,EXPORT, ...

  4. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...

  5. 前端动态属性页面的 要用id做name 因为这样方便在提交表单时候取到值

    前端动态属性页面的 要用id做name 因为这样方便在提交表单时候取到值

  6. 117 FP页面无法查看 此错误是JDK8.0.0.0版本的一个BUG,会导致工单重复回写,

    用户表示117 FP页面无法查看,提示如下错误: 跟进: 1.进入FP服务器可看到以下错误 这个错误的框就表示FP的一个进程报错,自动断掉了,需要重新跑一次EXIT,INIT,PLAN,EXPORT, ...

  7. 后端model传入前端JSP页面中的值判断后再取值

    所遇到的问题后端model传入前端JSP页面中的值通过foreach循环内要满足条件才能取值给Div中,我们知道jsp页面中可以直接用EL表达式取值,格式就是${"model中传来的数据&q ...

  8. 【04】Firebug页面概况查看

    Firebug页面概况查看 使用Firebug的概况,你可以测试Web页面导致延迟加载的文件. 通过打开页面 Firebug > Console(控制台)> Profile(概况). 你需 ...

  9. 嵌入式表单字段中的内容可能被server更改以删除不安全的内容。是否要又一次载入您的页面以查看保存结果?

    嵌入式表单字段中的内容可能被server更改以删除不安全的内容.是否要又一次载入您的页面以查看保存结果?         近期有朋友问到,当他在SharePoint首页上进行编辑时.插入一段代码. 完 ...

随机推荐

  1. Java后端传Long类型给前端导致的精度丢失

    问题:实体属性是Long类型,在后端值本来是1119102511023023410,但是返回给前端的却是1119102511023023400 解决方案:添加序列化注解 import com.fast ...

  2. 面试官:”准备用HashMap存1w条数据,构造时传10000会触发扩容吗?“

    通常在初始化 HashMap 时,初始容量都是根据业务来的,而不会是一个固定值,为此我们需要有一个特殊处理的方式,就是将预期的初始容量,再除以 HashMap 的装载因子,默认时就是除以 0.75. ...

  3. 解决IDEA卡顿的问题(Windows和Mac)

    IDEA卡顿 最近一段时间经常会在开发的时候感觉到 IDEA 很卡,在一个类里上下滚动或者切换类文件时都能够明显的感觉到,我以为是我项目打开的太多了,毕竟内存优化已经做过了,但是今天实在是被这玩意儿卡 ...

  4. 版本分支管理标准 - Git Flow

    最近好多开发人员在问如何使用 GIT 进行代码的版本管理. 这里转发一个标准的分支版本控制图. 相关的详细介绍,可以看: <引入git flow分支管理> <非常清晰明了的GIT版本 ...

  5. ECMAScript 初探 - 基础篇

    ECMAScript 语言的标准是由 Netscape.Sun.微软.Borland 等公司基于 JavaScript 和 JScript 锤炼.定义出来的. ECMAScript 仅仅是一个描述,定 ...

  6. 如何修改SQL Server 2008 R2数据库的内存

    本篇经验将和大家介绍如何修改SQL Server 2008 R2数据库的内存,希望对大家的工作和学习有所帮助! 工具/原料   SQL Sever 2008 R2数据库已安装 方法/步骤   1 打开 ...

  7. Debug 路漫漫-10:AttributeError: 'Embedding' object has no attribute 'get_shape'

    CNN的Embedding层报错: 报错:AttributeError: 'Embedding' object has no attribute 'get_shape' 查了下是这个问题: https ...

  8. CSS属性相关知识

    Css选择器 选择器的权重 在css中,哪个选择器的权重高,就走谁的样式. 标签选择器的权重是 1 Class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !im ...

  9. c语言课本及pta作业中运用到的程序思维

    c语言课本运用到的程序思维 我个人觉得在写程序的时候,有很多题目会用到我们学过的解决一个程序或者一个问题的方法,把这些方法运用起来,将会使自己更加灵活地解决诸多问题,为今后打下良好地基础. (因为还没 ...

  10. SQL --------------- order by 排序

    首先创建一个表弄点数据 order by 关键字用于排序查询 默认按照升序(asc)进行排列 降序要使用 desc排序方式:数字按照大小 英文字母和汉字按照第一个字母 从 a-z 排列语     法: ...