vue-cli(5.0.3)即Webpack搭建的Vue3项目开发模式没问题，打包后函数报错Cannot read properties of undefined (reading 'xxx') at onClose.a.<computed>.a.<computed>

前言

这是一个很离谱的bug, 我的一行JS在开发模式的时候是一切正常的，但是我将他npm run dist 打包到nginx后，这个按钮就报错了。

正常情况：关闭Dialog并且弹出message

但是吧，在开发环境是very good，dist放在nginx中就开始报错了。

报错信息

TypeError: Cannot read properties of undefined (reading 'dialogVisible') at onClose.a.<computed>.a.<computed>

报错截图

具体代码如下

最初报错的代码

我这个函数是子组件抛出的事件，但是这个对这个bug没有什么影响

<SingDialog
    title="感谢您的赞助"
    no-cancel-btn
    :visible="dialogVisible.sponsor"
    @close="() => {this.dialogVisible.sponsor = false;this.$message.success('感谢您的赞助')}” 
>

在开发模式中我用了一个箭头函数来实现这需要两行代码的函数，因为如果不这样的话，实际上会报同样的错。

实际上我很快就意识到，我明明有这个函数这个东西，但是他却给我说undefined 很明显是打包的问题，可能是webpack在打包成这个的过程中没有给这个函数一个特定的哈希，或者是说不符合他的打包原理（一般我们直接写的话可能就只写一行代码，这种情况是没有问题的）

于是我就把这两行代码写成了一个函数就解决了这个问题

如下所示：

<SingDialog
    title="感谢您的赞助"
    no-cancel-btn
    :visible="dialogVisible.sponsor"
    @close="closeSponsor()"
>

<script setup>
import {copyText} from "@/utils/ZhangG0CommonUtils.js";
import {reactive} from "vue";
import SingDialog from "@/components/Sing/SingDialog.vue";
import {ElMessage} from "element-plus";

const dialogVisible = reactive({
  reportBug: false,
  sponsor: false,
  about: false
})
/**函数在这里*/
function closeSponsor() {
  dialogVisible.sponsor = false;
  ElMessage.success({
    message:'感谢您的赞助',
    duration: 1000,
    center: true
  })
}
</script>

写在最后

这种bug我并没有去深究他到底是为什么，主要原因是我觉得这个bug深究了可能不能够学到太多东西，另外一个原因是webpack实际上并不在我的射程内，毕竟我是直接开射Vite 的，不过等不忙了还是会去射一下webpack 毕竟他比较成熟，vite 想把它射下马还是需要几年。

总结

在写v-if或者@click等事件类似的后面的括号里写js代码时，最多只写一行代码，如果有多行建议写成函数，在括号里写函数变量名，这样能保证不出错

【实战Bug】vue-cli(5.0.3)即Webpack搭建的Vue3项目开发模式没问题，打包后函数报错Cannot read properties of u

前言

报错信息

报错截图

具体代码如下

最初报错的代码

写在最后