调试是永远和开发分不开的一个话题,我相信没有谁能够不经过调试,一气呵成,将一个需求开发出来,如果是这样,一般都是一通操作猛于虎,一看bug在跳广场舞
。嗯,段子讲完了,那么久要进入正题了。
因为,我们开发的业务绝对需要上线到正式环境的,不然你做的就是一个玩具,对吗?而我们在本地【localhost】开发,终究是用不到线网的一些环境
,或许,比较规范的团队是有测试环境
的,所以,我们有必要先来区分一下几个环境。
白名单
。好的,环境区分出来了,那么,还是回到话题上来,为什么要搭建本地调试?我认为最主要的是提高开发效率
。反过来思考,我们如果不做本地调试配置的话,我们在本地调试会遇到什么问题?
非法域名
这种错误提示,因为登录校验是需要验你的请求是来自哪里的,很显然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文件到测试服务器上调试了。
这个其实就是一个配置的问题:
productionSourceMap: process.env.NODE_ENV.startsWith('development'), //需要调试信息就true
添加了这个配置,就可以进行vue源码调试了,可以断点,相当方便
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。