h5高效本地调试环境搭建

调试是永远和开发分不开的一个话题，我相信没有谁能够不经过调试，一气呵成，将一个需求开发出来，如果是这样，一般都是一通操作猛于虎，一看bug在跳广场舞。嗯，段子讲完了，那么久要进入正题了。

首先，我们为什么需要搭建本地调试环境？

因为，我们开发的业务绝对需要上线到正式环境的，不然你做的就是一个玩具，对吗？而我们在本地【localhost】开发，终究是用不到线网的一些环境，或许，比较规范的团队是有测试环境的，所以，我们有必要先来区分一下几个环境。

1. localhost：这里指你的本地环境，比如vue server可以启动一个server，来跑你的代码。
2. 测试环境：这里不同于正式环境的是，他是提供给测试，或者产品体验的一个服务器，其体验仅次于正式环境了，甚至各种环境变量配置都和正式环境类似，只不过数据是随意制造的，除了这一点和有正式环境有略微差别，其他几乎没有差别。和localhost的差别主要就是一些登录校验在这上面可以过，但是在localhost不行，原因就是因为域名没有被后台配置为白名单。
3. 正式环境：就是线网用户可以使用的环境，这个上面数据是真实数据，几乎和测试环境一致。

好的，环境区分出来了，那么，还是回到话题上来，为什么要搭建本地调试？我认为最主要的是提高开发效率。反过来思考，我们如果不做本地调试配置的话，我们在本地调试会遇到什么问题？

1. 我们请求测试环境接口会出现跨域
2. 我们请求需要登录的接口时，会去登录，然后一般会碰到非法域名这种错误提示，因为登录校验是需要验你的请求是来自哪里的，很显然localhost并不在测试服务器的白名单里，相信没有谁会加这个白名单吧。

嗯，知道这些问题之后，我们该如何解决这个问题呢？

跨域的解决

跨域出现的根本原因是因为你请求发出的地方和你的请求的地方不是同源，因此，我们的做法就是要改这个请求。这个的解决在我之前的文章中已经提到过，这里就简单的重复下了

devServer: {
    proxy: {
      '/api': {
        target: 'https://xxx.yyy.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }

这里尤其要主要api表示什么含义，他表示的是

'api/getlist/full'这样的请求会被转发到'https://xxx.yyy.com/getlist/full'请注意前面那个请求可没有什么http的头部,他就是以api开头的哦。所以，你如果使用axios框架的话，baseUrl是需要修改一下的，参考：

let protocol = window.location.protocol
let host = window.location.host //主机
let reg = /^localhost+/
if (reg.test(host)) {
 //若本地项目调试使用
 axios.defaults.baseURL = '/api'
} else {
 //动态请求地址
 axios.defaults.baseURL = `${protocol}//xxx.yyy.com`
}

那如果说，你的项目不是使用vue cli呢，怎么办，那也不用急，使用这个库，你同样可以做类似的配置。https://github.com/chimurai/http-proxy-middleware

效果就是，我们可以在本地请求测试服务器上的已有接口了，这里不不贴图片了。

登录态的解决

另外一个头疼的问题是登录态的问题，有些接口时需要登录态的，所以一旦请求就要你登录，登录显然是不成功的，会出现非法域名原因在上面说过，localhost不可能被配置为白名单。但是我么可以从cookie入手，试着想一下，如果，我们把locahost改成localhost.xxx.yyy.com，那么不就可以使用xxx.yyy.com下的cookie了吗？子域名使用父域名的cookie天经地义，嗯：

vim /etc/hosts
#然后在末尾不上这句
127.0.0.1 locahost.xxx.yyy.com

好了，现在你可以使用localhost.xxx.yyy.com:8080/xxxx 来代替 locahost:8080/xxxx了，然而，玩了没？并没有，登录态还是没有啊，那么怎么办？

你现在只需要在xxx.yyy.com上面随意找一个需要登录的页出发一下登录，登录成功，cookie中好之后，在回来localhost.xxx.yyy.com:8080/xxxx，各种需要登录的操作都ok了，原理就是子域名可以共享父域名的cookie。效果是如下图，localhost.xxx.yyy拥有了父域名的cookie，因此带登录态请求不成问题了。

至此登录态的问题也解决了，所以最终的效果就是，整个开发的过程都可以在本地进行，更本不需要频繁的rz文件到测试服务器上调试了。

Vue源码调试

这个其实就是一个配置的问题：

productionSourceMap: process.env.NODE_ENV.startsWith('development'), //需要调试信息就true

添加了这个配置，就可以进行vue源码调试了，可以断点，相当方便