前端 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 (或指定的端口号) 即可访问页面