项目情况:测试接口时本地连接数据一直属于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 configgzip 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

前端本地使用线上数据相关推荐

  1. LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  2. 深挖前端 JavaScript 知识点 —— 史上最全面、最详细的 Cookie 总结

    完整阅读本文大约需要二十分钟时间,可根据文章结构图直接阅读自己需要的部分. 1.Cookie 产生的背景 所有新技术的出现都是为了解决某一痛点. 我们都知道,HTTP 协议是无状态的,服务器无法知道两 ...

  3. 实践篇 | 构建下一代云上数据湖,助力车企数字化转型

    近几年,汽车行业全面拥抱电气化和数字化,一方面有行业先行者和政策法规的激励作用,另外一方面随着无线网络升级换代以及云计算技术越发成熟,车机端到企业端能够更加实时稳定传输丰富数据.如何利用好这些数据,为 ...

  4. 【Web技术】1295- 总结一下前端本地储存方案

    作者:星尘starx https://juejin.cn/post/6925311938419408904 引言 2022 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案: Cookie ...

  5. 【Web技术】1101- 深入浅出前端本地储存

    作者:星尘 https://www.yuque.com/starx/fe/oehz1m 引言 2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案: Cookie Web Stora ...

  6. curl命令java_Java 应用线上问题排查思路、工具小结

    本文总结了一些Java应用线上常见问题的定位步骤,分享的主要目的是想让对线上问题接触少的同学有个预先认知,免得在遇到实际问题时手忙脚乱.毕竟作者自己也是从手忙脚乱时走过来的. 只不过这里先提示一下.在 ...

  7. 怎么把前端文件传到服务器,前端怎么把文件上传到服务器

    前端怎么把文件上传到服务器 内容精选 换一换 本教程旨在演示使用GDS(General Data Service)工具将远端服务器上的数据导入GaussDB(DWS)中的办法,帮助您学习如何通过GDS ...

  8. 《大数据大创新:阿里巴巴云上数据中台之道》-读书笔记

    目录 0. 前言 1. 大数据的发展历程和价值探索 1.1 大数据发展的关键事件 1.2 大数据的内涵和外延 2.阿里的大数据主张 2.1 云上数据中台赋能业务运行图 2.2 阿里数据中台赋能业务全景 ...

  9. 评分高的前端书籍推荐(上)—好书知时节

    若说要学好前端,没有比看好书并且加以实战更好的方式了. 以下编者介绍可能是最好的关于前端的书: 第一本评分9.2     这本书的特点是图多.笑话多,看起来很很快,也比较轻松.技术书这样写,确实让读者 ...

最新文章

  1. 《ActionScript3.0 游戏设计基础(第二版)》随书代码和附赠章节(共4章)
  2. Python相对、绝对导入浅析
  3. ASP.NET 实践:写入 Cookie
  4. 清华硕士面试阿里惨遭淘汰,网友:并非所有都是强者,也要看人
  5. linux pxe安装mysql_搭建PXE实现自动化安装系统
  6. 《统计学》学习笔记之数据的收集
  7. torque安装笔记
  8. 深度学习-自然语言处理中的近似训练
  9. 1433. [ZJOI2009]假期的宿舍【二分图】
  10. jsp 中select 下拉选择框 el 三元运算符 如何选中与不选中
  11. linq 清除一条数据中的某个字段值_利用Postman中Tests断言校验返回结果
  12. VS2017下载地址和安装教程(图解)
  13. Linux下libaio的一个简单例子
  14. 华为rh5885服务器oid_华为RH5885HV3服务器,故障面板指示灯介绍
  15. dynadot解析域名
  16. 数据安全需要做什么?
  17. 移动机器人(四)四轴飞行器
  18. Mysql分组查询每组最新的一条数据(三种实现方法)
  19. mxgraph进阶 三 Web绘图——mxGraph项目实战 精华篇
  20. linux 堆溢出 pwn 指南,新手科普 | CTF PWN堆溢出总结

热门文章

  1. TS高级类型内置工具类型
  2. cookie怎样存储数据?
  3. 用计算机计算最大公因数,利用计算器求两个较大数的最大公约数的简便方法
  4. Python提示ModuleNotFoundError: No module named ‘PIL‘,已解决
  5. mysql 模糊查询之特殊字符下划线 _
  6. python夹角余弦雷达图_P19 从三角形夹角计算看math模块
  7. 20210310 20210311 :栈、队列、堆类题目合集
  8. 20191013:快速排序1.1
  9. oracle undo seg,正确切换undo
  10. OFFICE EXCEL表格中让A1 中的数字为变量时,如何引用