likes
comments
collection

测试姐姐:你给我的包为什么页面报错?我:我没有,不信你来我这看!

作者站长头像
站长
· 阅读数 12

测试姐姐:你给我的包为什么页面报错?我:我没有,不信你来我这看!

前言

      去年因为工作变动,导致一直在写业务代码,没遇到什么可写的东西,就在昨天突发了一个测试环境的bug,排查了一个多小时终于解决了这个问题,并且痛下决心,以后给测试包之前自己测一下生产包(宁可卷死自己,也不让测试多提一个bug)。

技术埋坑

      来到新公司的我一展自己的雄心抱负,决定好好的规划前端开发路线,走在潮流前线的我当然不让的选择了vue3+vite,但是看着手上的传承代码,心知急不得,于是第一个项目还是选择了vue3+webpack,别问为什么webpack,问就是require。众所周知vite里不能用require,而市面上大多数用于快速开发的框架都还在vue2阶段,里面的svg都还是使用了各种require,并没有多少开发时间的我还是将vite换成了webpack,痛,太痛了。

场景复现

      因为南京疫情最近比较严重,公司开始实行居家办公了,好开心啊,可爱的小猫咪陪伴我敲代码,连效率都变高了许多呢。在艰难的两天前后端联调完成后开心的打包给测试提测,半个小时后微信响起,怎么这个xxx页面打开一直loading?你给请求最大时间定了多少?我心想难道因为网络原因出现问题了吗,果断打开代码一看,10000ms,挺长的了啊。自信的和测试姐姐说:我给了10S了,足够接口反应了啊。于是乎测试远程内网打开页面后告诉我内网也不行,我还不清楚现在发生了什么,自信的说我来试一下,把本地地址链接到测试环境,欸,我这好的呀,特地截图给测试,你看,是不是好的。测试姐姐给我一顿骂,我让你打开测试地址不是让你本地跑。于是打开页面发现居然真的一直在loading,因为除了开发环境之外我打包都清除了console导致也看不到报了什么错误,害,把清除console给注释掉,重新打包。经过漫长的半个小时等待终于部署完成,这里要吐槽居家办公放包好麻烦啊!!!再上去看发现果然报错了,如图所示

测试姐姐:你给我的包为什么页面报错?我:我没有,不信你来我这看!

怎么会出现超出最大栈呢,我看着自己的代码陷入了沉思,复查了一边代码,没有递归,没有死循环,嗯,问题不出在代码,一定的!开始疯狂百度,看到有人说命名空间重名,我重新改了名字,打包,半个小时。。。嗯,不出意外的话出现了意外,还是相同的报错。再次聚焦回代码,挨个打印,发现打印出来的数据很奇怪,开发环境和测试环境都不一样。数据如下

测试姐姐:你给我的包为什么页面报错?我:我没有,不信你来我这看!

测试姐姐:你给我的包为什么页面报错?我:我没有,不信你来我这看! 发现问题出现在了...status.queryForm上,明明里面初始化是空数据,居然会结构出来很多东西,开发环境因为没有报错,当时就忽略了这个问题,没想到问题爆发在了打包之后。既然里面多了许多数据那一定存在了赋值操作,但是看了代码确实没有,那问题出在了哪里呢?吃过晚饭后,盯着代码突然发现了玄机!

<el-form :model="queryForm" ref="queryForm" :inline="true" size="small">

我们知道在vue3中使用ref需要先定义ref,很不凑巧我这个ref和里面toRefs解构出来的数据同名了,于是会被初始赋值,终于水落石出了哈哈哈。虽然不太明白为什么打包之后再...解构会出现超出最大栈,如果有大佬看到可以评论一下哈,但是问题的确解决了。打包,当我准备发送给测试的时候突然想万一出现问题怎么办,等一次部署半个小时太浪费时间了,那有没有什么办法可以自己本地测打好的包呢?

本地测试线上包

服务器之所以放包可以运行项目是因为有了nginx,那我们在本地起nginx不就可以测试包了吗,说干就干: 以下是nginx.conf内容:


worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

 client_max_body_size  10240m;

    server {
        listen       xxxx;
        server_name   localhost;
        #        default_type 'text/html';

	    #charset utf-8;
	    proxy_set_header X-Real-IP $remote_addr;

        
	}

    server {
        listen      xxx;
        server_name  localhost;

        location / {
            root   D:\xxxxx\dist;
            index  index.html index.htm;
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
        }

        location /api {
            proxy_pass http://xxxx;
        }
    }

}

因为涉及隐私,就隐藏了部分ip,大家可以自己定义。开心的测了下包,嗯,没问题,终于可以给测试姐姐一个好的包了。

文章创作于2022-02-24