前端本地使用线上数据

项目情况：测试接口时本地连接数据一直属于pedding状态，因为使用的网络问题不是很畅快，导致数据加载缓慢，所以想要尝试连接线上数据进行本地测试需要注意的是线上如果已正式上线切忌随意更改

在MAC电脑下进行如下操作

一：在本地安装nginx

• 在安装nginx之前需要先安装brew

  /usr/bin/ruby -e "$(curl -fsSL raw.githubusercontent.com/Homebrew/in…)"

• 查看是否成功安装成功

  brew search wget

  ==> Formulae
  wget    wgetpaste
  复制代码

  出现以上信息则表示成功安装

• 安装nginx

  brew install nginx nginx -v 「能够查询到版本号则表示成功安装」

二：在本地替换nginx.conf文件

• 在mac中使用command + 空格搜索路径/usr/local/etc/nginx将下面的文件替换文件夹中的nginx.conf文件

• nginx.conf文件内容【文件中有几个内容是需要更改的】

  • 修改一

  location / {
      # 用于配合 browserHistory使用
      root /Users/issuser/Desktop/****/dist;  ===>【需要换成自己文件中dist的地址】
      try_files $uri $uri/ /index.html;
  
      # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
      # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
  
  }
  复制代码

  • 修改二

  location /api {
      proxy_pass http://****.dmka.cn;  ====> 【改成自己线上项目地址】
  }
  复制代码

  • 将下面文件进行替换

  
  #user  nobody;
  worker_processes  1;
  
  #error_log  logs/error.log;
  #error_log  logs/error.log  notice;
  #error_log  logs/error.log  info;
  
  #pid        logs/nginx.pid;
  
  
  events {
      worker_connections  1024;
  }
  
  
  http {
      include       mime.types;
      default_type  application/octet-stream;
  
      #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
      #                  '$status $body_bytes_sent "$http_referer" '
      #                  '"$http_user_agent" "$http_x_forwarded_for"';
  
      #access_log  logs/access.log  main;
  
      sendfile        on;
      #tcp_nopush     on;
  
      #keepalive_timeout  0;
      keepalive_timeout  65;
  
      #gzip  on;
  
  server {
      listen 8080;
      # gzip config
      gzip on;
      gzip_min_length 1k;
      gzip_comp_level 9;
      gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
      gzip_vary on;
      gzip_disable "MSIE [1-6]\.";
  
      root /usr/share/nginx/html;
  
      location / {
          # 用于配合 browserHistory使用
  	    root /Users/issuser/Desktop/qamanage-pc/dist;
          try_files $uri $uri/ /index.html;
  
          # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
          # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
  
      }
      location /api {
          proxy_pass http://wenda.dmka.cn;
      }
  }
      # another virtual host using mix of IP-, name-, and port-based configuration
      #
      #server {
      #    listen       8000;
      #    listen       somename:8080;
      #    server_name  somename  alias  another.alias;
  
      #    location / {
      #        root   html;
      #        index  index.html index.htm;
      #    }
      #}
  
  
      # HTTPS server
      #
      #server {
      #    listen       443 ssl;
      #    server_name  localhost;
  
      #    ssl_certificate      cert.pem;
      #    ssl_certificate_key  cert.key;
  
      #    ssl_session_cache    shared:SSL:1m;
      #    ssl_session_timeout  5m;
  
      #    ssl_ciphers  HIGH:!aNULL:!MD5;
      #    ssl_prefer_server_ciphers  on;
  
      #    location / {
      #        root   html;
      #        index  index.html index.htm;
      #    }
      #}
      include servers/*;
  }
  
  复制代码

• 在终端输入nginx -t显示如下内容则成功

  nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok
  nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful
  复制代码

• 继续输入nginx显示如下内容则成功

  nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)
  nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)
  nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)
  nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)
  nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)
  nginx: [emerg] still could not bind()
  复制代码

• 然后在项目中输入yarn build

  这里我使用的是yarn你们也可以使用npm或是cnpm都可以

• 重启nginxnginx -s reload

• 每次运行时先执行yarn build编译完成时在浏览器中输入127.0.0.1:8080即可

  [注意事项]

  • 在本地输入console以及debugger是无效的如果非要测试的话可以尝试使用localStorage
  • 没更新一次都需要重新yarn build然后刷新浏览器

转载于:https://juejin.im/post/5d08843c51882563f967d609