项目情况:测试接口时本地连接数据一直属于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
都可以 -
重启nginx
nginx -s reload
-
每次运行时先执行
yarn build
编译完成时在浏览器中输入127.0.0.1:8080
即可[注意事项]
- 在本地输入
console
以及debugger
是无效的如果非要测试的话可以尝试使用localStorage
- 没更新一次都需要重新
yarn build
然后刷新浏览器
- 在本地输入