试想一下，某天 QA 给你报了一个线上问题，那你会怎么做？
我本地明明是好的啊？肯定是误报！
当然这种情况大部分是你内心的 YY，事实上是真的有问题。
看完 QA 的复现路径，你尝试在本地复现，然后你本地却怎么也无法复现。
究其原因，还是 live 和本地的环境差异导致，这里的原因就可能有很多，我理解主要是以下两点：
- 数据不同。本地更多的是用的 test 环境的数据，live 用的真实环境的数据。不同数据，页面的渲染以及交互可能是不同的。
- 打包配置不同。前端在使用一些打包工具，比如 webpack 的时候，一般会区分 dev 和 prod 环境。不同的环境配置不一样，比如 dev 环境需要开启热更新，prod 环境需要做一些代码压缩。
- ...
使用 nginx 本地部署我们打包出来的代码
对于上述的第二点，假如要复现的话，也很简单，只需要将我们本地 build 出来的代码跑起来，不就可以了？这里我们使用 nginx 本地部署我们打包出来的代码。
具体的安装 nginx 的流程，我们这里不做讨论，请各位看官自行 Google。如果是 Mac，并且你安装了 brew。如下：
brew install nginx第一步，打包你的代码。
第二步，修改你的 nginx 配置文件。Mac 是 /usr/local/etc/nginx/nginx.conf。修改 server root 中的配置，指向你项目打包后的静态文件存放的地址。
server {
listen 8080;
server_name localhost;
location / {
- root html/static;
# 项目打包后的静态文件存放的地址
+ root /Users/guangpingfeng/Documents/shopee/projects/yapi;
index index.html index.htm;
}
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}第三步，启动 nginx。至此，你就可以通过 http://0.0.0.0:8080 访问你的页面了，其跟正式环境的前端打包资源是一致的。
# 启动
nginx其它关于 nginx 更多命令：
- 退出服务：nginx -s quit
- 强制关闭服务：nginx -s stop
- 重载服务：nginx -s reload （重启，服务不会中止）
- 验证配置文件：nginx -t
- 使用配置文件：nginx -c
- 使用帮助：nginx -h
有没有简单一点的——whistle
这里不对 whistle 的过多介绍，感兴趣的可以看我之前的一篇文章——前端应该知道的web调试工具——whistle[1]。
使用 whistle 的思路，就是使用本地打包出来的资源代理到线上。
以上面的例子为例。我们希望线上访问 static/prd 目录下的静态资源能够访问到本地打包出来的资源。只需要配置这么一条规则（这里演示的域名我都使用 www.test.com）。whistle 会根据匹配 url 的剩余路径自动补齐本地文件路径，并自动忽略后面的请求参数：
www.test.com/static/prd file:///Users/projects/yapi/static/prd比如访问 https://www.test.com/static/prd/lib3@d380218b438aef3811b2.js 会代理到本地的 file:///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 的）。
live 数据和本地环境不同
这种情况，最快的方式，就是让 QA 给我复制一份 live 的数据，我直接把接口返回的数据代理到本地请求复现。这个通过 whistle 其实可以很简单实现，不展开细说。
另外，我们平时开发，实际上就是本地起了一个服务，用 webpack 做构建时，习惯引入 webpack-dev-server 做内存静态服务器，其提供了 proxy 负责做一层代理，我们通过匹配后端接口，然后通过 target 指向 live 环境。
proxy: {
'/api': {
target: `https://www.test.com,
changeOrigin: true,
onProxyRes(proxyRes, _, res) {
// ****
},
},
},同理，完全可以用 whistle 进行解决，一条规则搞定。
^http://0.0.0.0:9528/api/*** https://www.test.com/api/$1最后
你有遇到过，本地没有问题，线上有问题么？你们一般是怎么解决的呢？希望本文能够给你一些思路。
参考
- 用whistle实现map local[2]
- vue项目打包本地后通过nginx解决跨域🎉[3]
参考资料
[1]前端应该知道的web调试工具——whistle: https://juejin.cn/post/6861882596927504392。
[2]用whistle实现map local: https://juejin.cn/post/6844903600611819534。
[3]vue项目打包本地后通过nginx解决跨域🎉: https://juejin.cn/post/6956774987722129416。
