测试姐姐：你给我的包为什么页面报错？我：我没有，不信你来我这看！

前言

去年因为工作变动，导致一直在写业务代码，没遇到什么可写的东西，就在昨天突发了一个测试环境的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
复制代码