前端 npm anywhere 与 npm now 网页随时真机测试

一、简介

• anywhere 与 now 的区别
  两者都是没上传服务器的前端界面，也可以在实体机进行开发测试。
  anywhere 网段不一样会造成移动端访问不了的情况，now 则没有这个问题，但是它支持实时更新，且非网段问题都挺优秀的，后续可能会优化这点。
  now 的优势在于不受网段控制，数据网络情况下也可以访问，但是无法实时更新，每有更新就需要重新 now 一遍，然后在手机端输入 now 生成的新网址。
  

二、anywhere

• anywhere 是一个基于 Node.js 的静态文件服务器，可用于本地开发调试、展示页面等场景。
  
• 安装

$ npm i -g anywhere

• 使用
  1、进入需要启动本地服务的目录（比如：dist）

$ cd my-project/dist

• 2、在该目录下输入以下命令启动服务

# 默认端口为 8000
$ anywhere
# 指定端口
$ anywhere -p 8080
# 指定端口与主机名
$ anywhere -h localhost -p 8080

• 3、访问 http://localhost:8080 (或指定的端口号) 即可访问页面
• 高级用法
  1、自定义路由
  anywhere 可以通过配置路由来自定义 URL 的映射关系。在需要自定义路由的目录下创建名为 routes.json 的文件，格式如下：

{
  "/api": {
    "target": "http://localhost:3000"
  }
}

• 其中 "/api" 表示 URL path，"target" 表示映射到的地址。这样，在浏览器中访问 http://localhost:8080/api 时，就会自动转发到 http://localhost:3000 。
  2、HTTPS 支持
  anywhere 支持使用 HTTPS 来启动服务。需要在命令行中指定证书文件和私钥文件：

$ anywhere --ssl-cert=path/to/cert.pem --ssl-key=path/to/key.pem

• 3、跨域支持
  在调试 API 接口时，常常需要跨域访问接口。可以通过设置 Access-Control-Allow-Origin 头来实现跨域支持。在需要跨域访问的目录下创建名为 .htaccess 的文件，填入以下内容：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

三、now

• 整体跟 anywhere 用法差不多。
  
• 安装

$ npm i -g now

• 使用
  1、进入需要启动本地服务的目录（比如：dist）

$ cd my-project/dist

• 2、在该目录下输入以下命令启动服务

$ now
# 指定端口
$ now -p 8080
# 指定端口与主机名
$ now -h localhost -p 8080

• 3、访问 http://localhost:8080 (或指定的端口号) 即可访问页面