试想一下，有一天QA给你报告了一个在线问题，你会怎么做？我的地方明明不错吧？绝对是误报！当然，这种情况多半是你内心YY，其实是有实际问题的。看完QA复现路径，你尝试在本地复现，但是本地复现不了。原因是由于现场和本地环境的差异。这里可能有很多原因。我理解主要有两点：数据不同。测试环境更多使用本地数据，live使用真实环境数据。数据不同，页面渲染和交互可能不同。包装配置不同。前端在使用一些打包工具的时候，比如webpack，一般会区分dev环境和prod环境。不同的环境有不同的配置。比如dev环境需要开启热更新，prod环境需要做一些代码压缩。...使用nginx在本地部署我们打包好的代码对于上面的第二点，如果要复现，也是很简单的。你只需要在本地运行我们构建的代码，是不是就可以了？这里我们使用nginx在本地部署我们打包好的代码。安装nginx的具体过程这里就不展开讨论了，请自行google。如果是Mac，并且你已经安装了brew。如下：brewinstallnginx第一步是打包你的代码。第二步是修改你的nginx配置文件。Mac是/usr/local/etc/nginx/nginx.conf。修改服务器根目录下的配置，指向你项目静态文件打包的地址。服务器{听8080;服务器名称本地主机；位置/{-根html/static;#项目打包后静态文件存放地址+root/Users/guangpingfeng/Documents/shopee/projects/yapi;indexindex.htmlindex.htm;}#error_page500502503504/50x.html;location=/50x.html{根html;}}第三步，启动nginx。此时可以通过http://0.0.0.0:8080访问到你的页面，与官方环境的前端打包资源是一致的。#启动nginxnginx的其他更多命令：退出服务：nginx-squit强制关闭服务：nginx-sstop重新加载服务：nginx-sreload （重启，服务不会停止）验证配置文件：nginx-tUsingthe配置文件：nginx-c使用帮助：nginx-h有没有更简单的-whistle这里就不过多介绍whistle了，有兴趣可以看我之前的文章-前端应该知道的web调试工具-whistle[1].使用whistle的思路是利用本地打包的资源在线代理。以上面的例子为例。我们希望在线访问static/prd目录下的静态资源可以访问到本地打包的资源。你只需要配置这样一条规则（这里演示的域名我用的是www.test.com）。Whistle会根据匹配url的剩余路径自动补全本地文件路径，并自动忽略以下请求参数：www.test.com/static/prdfile:///Users/projects/yapi/static/prd为例如，访问https://www.test.com/static/prd/lib3@d380218b438aef3811b2.js将被代理到本地文件:///Users/projects/yapi/static/prd/lib3@d380218b438aef3811b2.js。这个很有用，但是有时候你会发现打包后的md5字符串不一样。在这种情况下，您可以使用通配符匹配。匹配模式必须以^开头（如果需要限制结束位置，可以作为通配符使用，支持通过0...9获取通配符匹配的字符串，其中$0代表整个请求url。上面例子的规则可以表示如下：^www.test.com/prd/**.*.*file:///Users/projects/yapi/static/prd/$1.$3当访问www.test.com/prd/index.xxxx.js,其实访问的是file:///Users/projects/yapi/static/prd/index.js.(注意此时本地打包的代码没有md5).直播数据和本地环境不一样，这种情况最快的方法就是让QA帮我拷贝直播数据，我直接把接口返回的数据代理到本地请求复现。通过whistle可以很简单的实现，我就不细说了。另外，我们一般都是在本地开发一个服务，在用webpack构建的时候，习惯引入webpack-dev-server作为一个内存静态服务器。提供一个代理负责一层代理。我们匹配后台接口，然后将targetpoints传给直播环境。proxy:{'/api':{target:`https://www.test.com,changeOrigin:true,onProxyRes(proxyRes,_,res){//****},},}，同理，它可以用哨子解决，用一个规则就可以搞定。^http://0.0.0.0:9528/api/***https://www.test.com/api/$1最后，你有没有在本地遇到过问题，但是在网上呢？你一般是怎么解决的？希望这篇文章能给你一些想法。参考使用whistle实现maplocal[2]vue项目本地打包，通过nginx解决跨域
